v-on参数
当通过methods中定义方法,以供@click调用,需要注意参数问题,
情况一:如果该方法不需要额外参数,那么方法后的()可以不添加。()
<!-- 1、 事件调用的方法没有参数-->
<button @click="btnClick">按钮1</button>
<button @click="btnClick()">按钮2</button>
<!-- 2、 在事件定义时,方法本身需要一个参数,正常的写法应该是下面这样的-->
<button @click="btn2Click(123)">按钮3</button>
<!--,那么如果不给参数的话,那么浏览器就会返回一个 undefined,不会报错
<button @click="btn2Click()">按钮3</button>-->
<!--如果连小括号都省了的话,Vue会默认将浏览器产生的event事件对象作为参数传给方法
<button @click="btn2Click">按钮3</button>-->
<!-- 3、 方法定义时,既需要event事件对象,同时又需要其他对象-->
<!-- 在调用方法时 如何手动获取event对象:$event-->
<button @click="btn3Click(123,$event)">按钮4</button>
<button>按钮5</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message:'你好啊'
},
methods:{
btnClick(){
console.log('btnClick');
},
btn2Click(event){
console.log('......',event);
},
btn3Click(abc,event){
console.log('+++++',abc,event);
}
}
})
</script>
<div id="app">
<h2>{
{
counter}}</h2>
<!--<button v-on:click="counter++">+</button>
<button v-on:click="counter--">-</button>-->
<!--<button v-on:click="increment">+</button>
<button v-on:click="increment">-</button>-->
<!-- v-on的语法糖 ,就是直接是一个@-->
<button @click="increment">+</button>
<button @click="increment">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
counter: 0
},
methods:{
increment(){
this.counter++
},
increment(){
this.counter++
}
}
})
</script>