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

来源:2-3 Vue实例中的数据,事件和方法

会武功的黄蓉

2019-07-09 15:58

<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回答

  • MoutsAlton
    2020-08-17 14:52:50

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

  • 用户1087803
    2019-07-09 16:47:22

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

vue2.5入门

快速理解Vue编程理念上手Vue2.0开发。

146818 学习 · 657 问题

查看课程

相似问题