对数组进行赋值 Vue 无法响应
<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app">
<h3>学生列表</h3>
<ul>
<li v-for="(item,key) in items">
<h4>{{item.name}}</h4>
<p>{{item.age}}</p>
</li>
</ul>
<button @click="changeButton">直接赋值操作</button>
<button @click="changeButton2">通过数组内置方法操作</button>
</div>
<script type="text/javascript">
let count = 1;
let vue = new Vue({
el: "#app",
data: {
items: [
{
name: "张三",
age: 12
},
{
name: "张三",
age: 12
},
{
name: "张三",
age: 12
}
]
},
methods: {
changeButton() {
count++;
this.items[0] = {
name: '张三' + count,
age: count
}
},
changeButton2() {
count++;
this.items.splice(0,1,{
name: '张三' + count,
age: count
})
}
}
});
</script>
</body>
</html>
在上面代码中 changeButton 事件是直接修改数组的某一个值，但是我们在触发这个事件后发现页面上与这个数组元素绑定的显示并没有发生改变。
这是因为 Vue 并没有监听我们对数组元素的直接修改，我们需要需要借助 splice 对数组元素进行替换，这种方式的赋值 Vue 是能够监听到的，然后实时改变页面 Dom 的显示。
splice 方法
splice(start: number, deleteCount: number, ...items: T[])- start：用于指明删除操作开始位置的索引值
- deleteCount: 删除元素的个数
- items：可变参数，表示在删除完成后，需要插入的元素
借助 splice 我们可以完成删除、替换、新增操作，例：
arr.splice(5,0,'A','B')：在 index=5 的后面插入A、B两个元素。arr.splice(3,1)：删除 index=3 的元素arr.splice(5,2,'A','B')：将 index=5,6 的元素分别替换为'A'、'B'
我们在前面看到了对数组中的元素直接进行赋值操作，是无法被 Vue 响应的，我们需要借助数组中的方法才能触发 Vue 的响应。但是我们如果修改数组元素中的属性值，是能够被 Vue 响应的，我们在上面代码的基础上创建一个新的事件：
changeButton3() {
count++;
this.items[0].name='new Value ' + count;
}
当我们触发这个事件时，我们可以发现 Vue 做出了响应。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
上一篇： 理解 Linux 系统负载
下一篇： 谈谈自己对于 AOP 的了解
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论