Vue v-on多个事件修饰符

Vue v-on多个事件修饰符教程

Vue v-on 指令支持多个事件修饰符连写的模式，Vue v-on 指令多个事件修饰符连写模式的语法为 @event.eventModifier1.eventModifier2...。

案例

Vue v-on多个事件修饰符连写

<!DOCTYPE html>
<html>
<head>
	<title>Vue v-on 多个事件修饰符连写</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<body>
	<div id="app">
		<a href="http://www.baidu.com" @click.prevent.once='linkClick'>百度</a>
         <p>嗨客网（www.haicoder.net）</p>
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el :'#app',
		data:{
		},
		methods:{
			linkClick(){
				console.log('去百度');
			}
		}
	})
</script>
</html>

我们使用了 @click.prevent.once 连写了 click 事件的 prevent 修饰符和 once 修饰符。浏览器运行后，效果如下图所示：

20 vue von.png

Vue v-on多个事件修饰符总结

Vue v-on 指令支持多个事件修饰符连写的模式，Vue v-on 指令多个事件修饰符连写模式的语法为 @event.eventModifier1.eventModifier2...。