渲染列表时:
需求是点击按钮后修改值为1000,如图所示:
先看以下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
<style>
.actived {
color: red;
background-color: aqua;
}
</style>
</head>
<body>
<div id="app">
<div>
<div
v-for="(item,index) in arr">
{{item}}
<button v-on:click="change(index)">修改</button>
</div>
</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
flag:false,
arr:[
100,
200,
300
]
},
methods:{
change(index){
console.log(index)
this.arr.splice(index,1,1000)
}
}
})
</script>
</body>
</html>
当我们使用下标来修改数组中的值时,vue是不会动态修改值的:
当vue遇到push pop shift unshift splice sort reverse 的时候数组都会改变。
渲染对象时:
需求如下所示:
先看正确代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="./vue.js"></script>
<style>
.actived {
color: red;
background-color: aqua;
}
</style>
</head>
<body>
<div id="app">
<div v-for="item in arr" :key="item.id">
<h1>{{item}}</h1>
</div>
<button @click="add">add</button>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
arr: [
{
id: 1,
fruit: "苹果",
},
{
id: 2,
fruit: "香蕉",
},
{
id: 3,
fruit: "橙子",
},
],
},
methods: {
add() {
//这里有两种方法,第一个是使用修改数组时使用的方法splice
// app.arr.splice(1,1,{ "id": 2, "fruit": "香蕉" ,'color':'黄色'})
//第二个是官方提供的$set()方法
app.$set(this.arr[1],'color','red')
},
},
});
console.log(app);
</script>
</body>
</html>
其中的第二个$set方法,由于 Vue 会在初始化实例时进行双向数据绑定,使用Object.defineProperty()对属性遍历添加 gett/sertter 方法,所以属性必须在 data 对象上存在时才能进行上述过程 ,这样才能让它是响应的。如果要给对象添加新的属性,此时新属性没有进行过上述过程,不是响应式的,所以会出想数据变化,页面不变的情况。
如果用下面这个方法修改:
发现也是可行的。
但是!!!!
当我们用这种方法去添加新属性时,就发现实现不了了:
千万不要掉进惯性思维的陷阱!