v-on事件绑定

最新推荐文章于 2024-07-19 10:52:30 发布

qiphon3650

最新推荐文章于 2024-07-19 10:52:30 发布

阅读量1.5w

点赞数

分类专栏： Vue 文章标签： v-on

本文链接：https://blog.csdn.net/qiphon3650/article/details/73380132

版权

Vue 专栏收录该内容

43 篇文章 1 订阅

订阅专栏

我们可以用 v-on 指令绑定一个事件监听器，通过它调用我们 Vue 实例中定义的方法：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
		<title>vue</title>
		<script src="vue.js"></script>
		
    </head>
    <body>
    	<div id="test">{{msg}}
			<p v-for="val in arr">
				{{val.a}} 
			</p>
			<a href="javascript:void(0)" v-on:click="tap">点我</a>
    	</div>
    </body>
</html>
<script>
	// window.οnlοad= function(){
		var app2 = new Vue ({
			el:"#test",
			data:{
				msg:'润元装饰',
				msg1:"家装"+new Date(),
				msg2:'lianxi',
				show:true,
				arr:[
					{a:'bb'},
					{a:'cc'}
				]
			},
			methods:{
				tap : function(){
					this.arr.unshift({a:'new'})
				}
			}
		})
	// }
</script>

注意在 tap 方法中，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理，你编写的代码不需要关注底层逻辑。