标签：vue letters 数组 删除 检测 元素 Vue splice
检测数组更新
-
因为Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新。
-
Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新。
方法
-
push(): 添加
-
pop()： 删除数组中的最后一个元素
-
shift(): 删除数组中的第一个元素
-
unshift(): 在数组最前面添加元素
-
splice作用：删除元素，插入元素，替换元素
-
sort() 排序
-
reverse() 反转
代码：
<!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="../js/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item, index) in letters">{{item}}</li>
</ul>
<button @click="btnClick">按钮</button>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
letters: ['A','B','C','D','E']
},
methods: {
btnClick() {
// 1.push方法
// this.letters.push('aaaa')
// this.letters.push('aaa','bbb','ccc')
// 2.pop()： 删除数组中的最后一个元素
// this.letters.pop();
// 3.shift(): 删除数组中的第一个元素
// this.letters.shift();
// 4.unshift(): 在数组最前面添加元素
// this.letters.unshift()
// this.letters.unshift('aaa','bbb','ccc')
// 5.splice作用：删除元素，插入元素，替换元素
// 删除元素：第二个参数传入你要删除几个元素(如果没有传，就删除后面所有的元素)
// 替换元素：第二个参数，表示我们要替换几个元素，后面是用于替换前面的元素
// 插入元素：第二个参数，传入0，并且后面跟上要插入的元素
// splice(start)
// const start = 2
// this.letters.splice(start, this.letters.length-start)
// this.letters.splice(1, 3,'m','n','l')
// this.letters.splice(1, 3)
// this.letters.splice(1, 0,'a','b','v')
// 6.sort() 排序
// this.letters.sort()
// 7.reverse() 反转
// this.letters.reverse()
// 注意.通过索引值修改数组中的元素，不建议，因为这个不是响应式的
// this.letters[0] = 'bbbb'
this.letters.splice(0, 1, 'aaa') // 建议用splice
// Vue.set(this.letters,0,'aaa')
}
},
})
</script>
</body>
</html>
标签：vue,letters,数组,删除,检测,元素,Vue,splice 来源： https://www.cnblogs.com/LEPENGYANG/p/15793690.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。