Vue v-on stop事件修饰符

Vue v-on stop教程

Vue v-on 指令的 stop 修饰符用于阻止浏览器的默认行为（比如：a 标签的跳转、submit 的提交）。Vue v-on 指令的 stop 修饰符的行为类似原生 JavaScript 的 preventDefault 方法。

Vue v-on stop与self

Vue v-on stop 会阻止真正冒泡事件，而 Vue v-on self 只会阻止自己身上的冒泡行为的触发。

案例

Vue v-on stop

Vue v-on stop 阻止 a 链接跳转

<!DOCTYPE html>
<html>
<head>
	<title>Vue v-on stop 事件修饰符</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='linkPrevent'>百度</a>
         <p>嗨客网（www.haicoder.net）</p>
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el :'#app',
		data:{
		},
		methods:{
			linkPrevent(){
				console.log('去百度');
			}
		}
	})
</script>
</html>

浏览器运行后，点击 button 按钮，浏览器控制台打印出了去百度，但并没有跳转，效果如下图所示：

16 vue von stop.png

即，我们使用了 Vue v-on 指令的 stop 修饰符，阻止了超链接的默认的跳转功能。

Vue v-on指令stop修饰符总结

Vue v-on 指令的 stop 修饰符用于阻止浏览器的默认行为，实现的功能类似原生 JavaScript 的 preventDefault 方法。