Vue的常用指令之事件绑定（v-on）
程序员文章站
2022-05-15 13:49:02
...
Vue的常用指令之事件绑定（v-on）
v-on：通过v-on去给指定的事件绑定一个处理函数
语法：<any v-on:eventName="处理函数的名字"></any>
eg：<button v-on:click="handleClick">clickMe</button>
当触发click事件就回调用handleClick方法
注意：方法在定义时，要放在Vue实例的methods属性
事件绑定支持一种简写形式（@）
<button v-on:click="handleClick">clickMe</button>
通过@后面跟上事件名字和v-on：是一样的效果
<button @click="handleClick">clickMe</button>
vue.js为v-on提供了事件修饰符，通过由点（.）表示的指令后缀来调用修饰符
eg：<button v-on:submit.prevent="handleClick">clickMe</button>
例子：
<body>
<div id="container">
<h1>{{msg}}</h1>
<button v-on:click="handleClick">clickMe</button>
<select v-on:change="handleChange">
<option value="red">红色</option>
<option value="green">绿色</option>
<option value="yellow">黄色</option>
</select>
<form v-on:submit.prevent="handleSubmit">
<input type="checkbox" />是否同意本站协议
<br>
<button>登录</button>
</form>
</div>
<script>
new Vue({
el: "#container",
data: {
msg: '麻子'
},
methods: {
handleClick: function () {
console.log(this)
this.msg = "mazi"
},
handleChange: function (event) {
console.log("选择了某个领域" + event.target.value)
},
handleSubmit: function () {
console.log("提交时间被触发了")
}
}
})
</script>
</body>
上一篇： Vue教程(八)v-bind指令动态绑定
下一篇： vue实现单击选中效果