问题:
<body>
<div id="app">
<div v-for="item in arr" :key="item">
<h1>{{item}}</h1>
</div>
<button @click="change">改变数组</button>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
arr: ["苹果","香蕉","橙子"],
},
methods: {
change() {
//问题:想通过索引改变数组的值,失败
this.arr[2]='葡萄';
},
},
});
</script>
</body>
1.用set解决:
methods: {
change() {
//成功改变第三个数组元素的值
this.$set(this.arr, 2, '葡萄');
},
}
2.用splice解决
methods: {
change() {
//成功改变第三个数组元素的值
this.arr.splice(2, 1, "葡萄");
},
}
3.用pop+push解决
methods: {
change() {
//成功改变第三个数组元素的值
this.arr.pop(''); //删除最后一个元素
this.arr[2] = "葡萄"; //改变最后一个元素的值
this.arr.push(''); //添加最后一个元素
},
}
4.用unshift解决
methods: {
change() {
//成功改变第一个数组元素的值
this.arr[0] = "葡萄"; //改变第一个元素的值
this.arr.unshift(''); //添加第一个元素
},
}
5.用shift解决
data: {
arr: ["水果", "苹果", "香蕉", "橙子"],
},
methods: {
change() {
//成功改变第一个数组元素的值
this.arr.shift(''); //删除第一个元素
this.arr[0] = "葡萄"; //改变第一个元素(苹果)的值
},
}
6.用sort解决
methods: {
change() {
//成功改变最后一个数组元素的值
this.arr.sort(); //数组重新排序:橙子,苹果,香蕉
this.arr[2] = "葡萄"; //改变最后一个元素的值:橙子,苹果,葡萄
},
}
7.用reverse解决
methods: {
change() {
//成功改变最后一个数组元素的值
this.arr.reverse(); //数组反转:橙子,香蕉,苹果
this.arr[2] = "葡萄"; //改变最后一个元素的值:橙子,香蕉,葡萄
},
}
633
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
