6.vue事件绑定-click - 执着的烙印

Z时代
2024-01-10
分类：综合

vue

6.vue事件绑定-click

1.vue的事件绑定格式是v-on: 或者@

比如

或者是

<button @click="counter += 1">Add 1</button>是一样的

2.事件处理方法，要在methos中定义。比如

methods:{
clickMe(){
console.log(\'我是methods中的方法 clikMe\')
}
}

3.以下是案例代码，

<div id="app">
<div id="example-1">
<button v-on:click="counter += 1"> 数值 : {{ counter }} </button><br />
<button v-on:dblclick="greet(\'abc\', $event)">Greet</button>
<button type="button" @click="clickMe">点击一下: {{num}}</button>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
counter: 0,
name : "vue",
num: 1
},
methods:{
greet : function (str, e) {
alert(st);
console.log(e);
},
greet(str, e){
alert(str);
console.log(e);
},
clickMe(){
this.num++
}
}
});
</script>