为了账号安全,请及时绑定邮箱和手机立即绑定

只在一个div里面添加了点击事件,为什么所有msg都改变了

<html>

<head>

<meta charset="UTF-8">

<title>Vue入门</title>

<script src="vue.js"></script>

</head>

<body>

<!-- vue实例的挂载点 -->

<!-- 模版可以写在挂载点里面,也可以写在实例里的template属性里面 -->

<div id="root">

<!-- 插值表达式 -->

<h1>{{msg}}</h1>

<h2 v-text="number"></h2>

<h3 v-html="number"></h3>

<!-- 转义,显示<h1>hello</h1> -->

<div v-text="content"></div>

<!-- 不转义,显示hello -->

<div v-html="content"></div>

<!-- 绑定事件v-on: -->

<div @click="handleClick">{{msg}}</div>

</div>


<script>

// 创建一个vue实例,让vue实例接管id=root元素里面的内容,这个vue实例就和id为root的dom进行了绑定

new Vue({

el:"#root",

// 模版可以写在实例里面

// template:'<h1>hello {{msg}}</h1>',

data:{

msg:" world",

number:123,

content:"<h1>hello</h1>"

},

methods:{

handleClick:function(){

this.msg = "hello"

}

}

})

</script>

</body>

</html>


正在回答

2 回答

因为其余所有的div都在id = root 这个挂载点下,里面的msg的值全由你实例data里msg的值决定,而this.msg改变的是实例里msg的值,数据源头改变了,自然全部改变

1 回复 有任何疑惑可以回复我~

因为msg都是vue实例data下的msg,点击事件只有一个div有,但是改变的是data中的数据,所有 所有的msg都变了,点击事件唯一,msg唯一,msg的值的引用可以多个 

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

只在一个div里面添加了点击事件,为什么所有msg都改变了

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信