Vue.js中事件监听可以使用 v-on 指令：
通过记录按钮点击次数来学习如何使用v-on指令来监听事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="src/vue.min.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="counter+=1">增加1</button>
<p>这个按钮被点击{{counter}}次</p>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
counter:0
}
})
</script>
</body>
</html>
运行结果：
点击增加1按钮，那么这个按钮被点击的次数就会增加。
通常情况下，我们会使用一个方法来调用javaScript方法，v-on 可以接收一个定义的方法来调用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
<script src="src/vue.min.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="addTimes">增加1</button>
</div>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
counter:0
},
methods:{
addTimes:function (event) {
this.counter+=1
alert("按钮点击的次数"+this.counter)
}
}
})
app.addTimes()
</script>
</body>
</html>
运行结果
点击”增加1”按钮，会弹出如下图的对话框
除了直接绑定到一个方法，也可以用内联 JavaScript 语句：
下面通过内联javaScript语句，实现和上个例子一样的功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
<script src="src/vue.min.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="addTimes()">增加1</button>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
counter:0
},
methods:{
addTimes:function () {
this.counter+=1
alert("按钮点击的次数"+this.counter)
}
}
})
</script>
</body>
</html>
231
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
