介绍
html 的button元素，使用 onclick 添加点击事件
在vue中，通过 v-on 指令监听事件
点击事件：<input type="button" v-on:click="modify" >
缩写
v-on:缩写成 @
例子：
<input type="button" @click="modify" value="切换（缩写）">
简单例子
<div id="app">
<input type="button" v-on:click="show" value="弹出对话框">
<input type="button" @click="show" value="弹出对话框2">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
var vm = new Vue({
el: '#app',
methods:{ // 在 methods 对象中定义方法
show:function(){
alert("点击事件")
}
}
})
</script>
show() 函数就在 vm 对象下，如下图：
事件对象例子
方法的第一个参数，是 事件对象，通过该事件对象，可以获得 发出事件的控件对象
<div id="app">
<input type="button" v-on:click="show" value="弹出对话框">
<input type="button" @click="show" value="弹出对话框2">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
var vm = new Vue({
el: '#app',
methods:{ // 在 methods 对象中定义方法
show:function(event){//第一个参数是事件对象
console.log(event)
console.log(event.target)// 获取发出事件的控件对象
event.target.value='修改名字' // 修改按钮名字
}
}
})
</script>
参数例子
控件传递参数时，需要传参 $event，表示传递 事件对象
<div id="app">
只传参：<input type="button" v-on:click="show('hello 李雷')" value="弹出对话框"><br>
传事件对象和参数：<input type="button" @click="show2($event,'hello 韩梅梅')" value="弹出对话框2">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
var vm = new Vue({
el: '#app',
methods:{ // 在 methods 对象中定义方法
show:function(msg){//第一个参数是事件对象
alert(msg)
},
show2:function(event,msg){//第一个参数是事件对象
console.log(event)
console.log(event.target.value)
event.target.value='修改名字' // 修改按钮名字
alert(msg)
}
}
})
</script>
切换按钮例子
<style>
[v-cloak] {
display: none;
}
</style>
<div id="app" v-cloak>
<a v-bind:href="url">{{name}}</a>
<input type="button" v-on:click="modify" value="切换">
<input type="button" @click="modify" value="切换（缩写）">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
name: "百度",
url: "http://www.baidu.com"
},
methods:{ // 在 methods 对象中定义方法
modify:function(){
this.name="马老师"
this.url="http://www.malaoshi.top"
}
}
})
</script>