首先，先来学习一下绑定单击事件和双击事件的2个常用标签：
v-on:click 表示单击
v-on:dblclick 表示双击
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue.js 学习</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<!--app是根容器 -->
<div id="app">
<h1> events </h1>
<button v-on:click="add(1)">老1岁</button>
<button v-on:click="subtract(1)">减1岁</button>
<button v-on:dblclick="add(10)">老10岁</button>
<button v-on:dblclick="subtract(10)">减10岁</button>
<p>my age is {{age}}</p>
</div>
<script src="app.js"></script>
</body>
</html>
//实例化vue对象
new Vue({
el:"#app",
data:{
age:31
},
methods:{
add: function(inc){
this.age += inc;
},
subtract: function(dec){
this.age -= dec;
}
}
});
通过传不同的值来实现单击事件和双击事件的绑定
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
