v-on指令
计数器演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue-事件处理器</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
<div>计数器:{{s}}</div>
<button v-on:click="s+=1">按钮</button>
<script type="text/javascript">
new Vue({
el: '#app',
data:{
s:0
}
})
</script>
</body>
</html>
v-on指令调用方法
调用自定义方法演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue-事件处理器</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
<button v-on:click="s">按钮</button>
<script type="text/javascript">
new Vue({
el: '#app',
data:{
s:function(){
alert("hello");
}
}
})
</script>
</body>
</html>
在事件中读取data里的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue-事件处理器</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
<button v-on:click="s">按钮</button>
<script type="text/javascript">
new Vue({
el: '#app',
data:{
a:"xiaowang"
},
methods:{
s:function(event){
alert(this.a);
},
}
})
</script>
</body>
</html>
方法参数设置方式
1.变量操作
v-on:click="s+=1"
2.调用Vue对象（方法）
v-on:click="add"
2.调用Vue对象（方法）加参数
v-on:click="add(a)"