VUE绑定事件方法

最新推荐文章于 2025-04-25 17:22:42 发布

原创最新推荐文章于 2025-04-25 17:22:42 发布 · 583 阅读

CC 4.0 BY-SA版权

下面是比较详细的代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="js/vue.min.js"></script>

    <script>
    	// 监听
        window.onload = function(){
        // 创建Vue
       	var vm = new Vue({
       		// 绑定操作对象
            el:"#box",
            data:{
            // 注意这里用的是: 不是等号,很多人会写错,一定要注意
                number : 0,
                btnname : "点我加一",
            },
            // 使用methods 这个key 来定义为标签绑定方法
            methods:{
                // 方法名:匿名函数
                addone:function(){
                    // 使用this 来引用当前data中的变量
                    this.number += 1
                }
            }
        });
        }
    
    
    </script>

</head>
<body>
	<!-- 设置模板变量 -->
    <div id="box">
        <p> {{number}} </p>
        <!-- 标准格式 -->
        <!-- button 是一个点击按钮 -->
        <button v-on:click='addone'>{{btnname}}</button>
        <!-- 简化格式 -->
        <button @click='addone'>{{ btnname }}</button>

    </div>
    
</body>
</html>

v-on:click 的简写 @click

VUE绑定事件方法

where there is a will, there is a way !