示例:
<div id="app">
<ul>
<li v-for="item in moveList">{{item}}</li>
</ul>
<button @click="changeList">点击修改</button>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
msg: '欢迎使用Vue.js',
moveList: [
'阿甘正传',
'英伦对决',
'钢铁侠'
],
},
methods: {
changeList() {
// 1.响应式修改数组的方法
// push、pop、shift、unshift、splice、sort、reverse
// Vue.set();
// 2.不能响应式的修改数组的方法
// 通过数组索引值修改值的时候。
this.moveList[0] = '大话西游';
console.log(this.moveList);
/*打印的this.moveList是[
'大话西游',
'英伦对决',
'钢铁侠'
], 但是页面渲染的数据没有响应式*/
}
}
})
</script>