Vue v-on once事件修饰符

Vue v-on once教程

Vue v-on 指令的 once 修饰符用于绑定一次性事件。

案例

Vue v-on once

Vue v-on once 绑定一次性事件

<!DOCTYPE html>
<html>
<head>
	<title>Vue v-on once</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<body>
	<div id="app">
		<input type="button" name="once" value="执行一次" @click.once='onceClick'>
         <p>嗨客网（www.haicoder.net）</p>
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el :'#app',
		data:{
		},
		methods:{
			onceClick(){
				console.log('HaiCoder');
			}
		}
	})
</script>
</html>

浏览器运行后，第一次点击 button 按钮，浏览器控制台打印出了 HaiCoder，再次点击，没有任何输出，此时我们刷新浏览器后，再次点击按钮，控制台再次输出 HaiCoder，效果如下图所示：

17 vue von once.png

即，我们使用了 Vue v-on 指令的 once 修饰符，实现了绑定一次性事件。

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

Vue v-on 指令的 once 修饰符用于绑定一次性事件。