Vue之v-on修饰符once
未加once修饰符,完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>v-on(once)</title>
</head>
<body>
<div id="app">
<input type="button" value="点我" @click="myClick" />
<h1>{{num}}</h1>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
num: 0,
},
methods:{
myClick(){
this.num++;
console.log(this.num);
}
}
})
</script>
</body>
</html>
注意:num前一定要加this,this这里指的是vm.
点击按钮效果如图:
加上once后。
<input type="button" value="点我" @click.once="myClick" />
多次点击。结果如图:
这个修饰符简单,但有用。