<body>
<div id="app">
<ul>
<button @click="add">添加</button>
<li v-for="i in list"> {{ i }} </li>
</ul>
</div>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js'></script>
<script>
const app = new Vue({
el: '#app',
data: {
list: ['a', 'b', 'c', 'd', 'lll'],
},
methods: {
add() {
// this.list.push('+++++'); // 有响应式
this.list[0] = "hellow"; // 替换 没有响应式 其实已经改变了 但是没有渲染到页面来！！！！！！！！！
// 方法1： 如果要替换可以用下面这行代码来实现
// this.list.splice(0, 1, "我是更新后的Li") // 第0个开始 替换1个元素 被替换后的内容
// 方法2：vue中有set方法也可以实现替换
Vue.set(this.list, 0, "我是VUE里面的set方法替换的") // 要替换的数组 把第index个替换 要替换的内容
// this.list.pop(); // 删除最后一个元素 有响应式
// this.list.shift(); // 删除第一个元素 有响应式
// this.list.unshift('嘿 你还好吗') // 在第一个元素前面添加元素 有响应式
}
}
})
</script>
</body>