正在回答
同学你好，splice()方法会把指定位置的元素删除，再把新的元素插入到原来的数组，从删除到再新添加，data是能监听到数组的变化的，关于this.list[index] = 'aaa';方法问题，我们换个思路来理解，比如原来数组中有4个元素，即便是你给其中一个元素赋值了，但是data监听到的是你数组中还是4个元素，那么，解析的时候，data会认为你的数据是没有变化的，就不会去更新数据，但是当你重新输入，再去添加一个元素的时候，因为数组中的元素个数发生了变化，data这个时候才会监听到数据变化了，从而更新数据。
祝学习愉快！
同学你好，老师理解你说的两种方法的区别了，下面老师帮你详细分析原因：
1、首先我们知道，在vue中data:{}是用来监听数据的，而在同学的代码中， list:[]是在data:{}中，也就是data会监听list:[]的变化。
2、我们知道splice()方法会改变原始数组，也就是说splice(index,1,now)会用now值替换掉原数组中(index,1)这个位置的值。因为原始数组被改变，所以data:{}能够监听到list:[]的变化，说白了就是data:{}监听到了数据的变化，就会更新数据，这个时候点击删除，就会更新值。
3、使用this.list[index] = 'aaa';这种方法，虽然给数组中的元素进行了赋值，但是并不会改变原有的数组，也就是当点击删除的时候，data:{}监听到的还是原始数组，数据没有变化，就不会更新，但是当重新输入内容，点击提交，这个时候原始数组因为有新的元素插入，就会被更改，data:{}监听到了数据的变化，从而更新数据，才会使aaa生效。
希望可以帮到你，祝学习愉快！
<!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>
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue">
<button @click="btnAdd">提交</button>
<ul>
<todo-item :content="item"
:index="index"
v-for="(item,index) in list"
@add="plus">
</todo-item>
</ul>
</div>
<script>
// Vue.component("todo-item",{
// props:['content'],
// template:"<li>{{content}}</li>",
// })
var TodoItem = {
props:['content','index'],
template:"<li @click='btnClick'>{{content}}</li>",
methods:{
btnClick:function(){
this.$emit('add',this.index);
}
}
}
var app = new Vue({
el:'#app',
data:{
list:[],
inputValue:''
},
components:{
TodoItem
},
methods: {
btnAdd:function() {
this.list.push(this.inputValue);
this.inputValue = '';
},
plus:function(index) {
// let now = Number(this.list[index]) + 1;
// this.list.splice(index,1,now)
this.list[index] = 'aaa';
}
},
})
</script>
</body>
</html>
- 参与学习 人
- 提交作业 239 份
- 解答问题 10739 个
本阶段带你深入前端开发的肌理，通过ES6基础知识和前端主流高级框架的学习，助你快速构建企业级移动webAPP应用，进入职场的终极battle
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星