检测数组更新
-
因为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>