[JavaScript知识库]vue.js常用数组的响应式方法

?

methods:{
? ? ? btnPushClick(){
? ? ? ? //1.push方法,最后一位添加元素，响应式,数据改变
? ? ? ? this.letters.push('K')
? ? ? },
? ? ? btnPopClick(){
? ? ? ? //2.pop()删除最后一位元素，响应式，数据改变
? ? ? ? this.letters.pop()
? ? ? },
? ? ? btnShiftClick(){
? ? ? ? //3.shift()删除第一个元素，响应式，数据改变
? ? ? ? this.letters.shift()
? ? ? },
? ? ? btnUnshiftClick(){
? ? ? ? //4.unshift()在首位添加元素，响应式，数据改变
? ? ? ? this.letters.unshift('K')
? ? ? },
? ? ? btnSpliceClick(){
? ? ? ? //5.splice作用：删除元素/插入元素/替换元素
? ? ? ? //splice(start)：第一个参数
? ? ? ? //删除元素：第二个参数传入要删除几个元素(如果没有传值，就删除start后面所有）
? ? ? ? //替换元素：第二个参数，表示我们要替换结果元素，后面是用于替换的元素
? ? ? ? //插入元素：第二个参数：0，并且后面跟上要插入的元素
? ? ? },
? ? ? btnSortClick(){
? ? ? ? //排序，从小到大，响应式
? ? ? ? this.letters.sort()
? ? ? },
? ? ? btnReverseClick(){
? ? ? ? //反序，响应式
? ? ? ? this.letters.reverse()
? ? ? },
? ? ? btnIndexClick(){
? ? ? ? //通过索引直接修改，数据被改变，但是不是响应式的，页面不会改变
? ? ? ? this.letters[0] = 'K'
? ? ? },
? ? ? btnVueSetClick(){
? ? ? ? //set(要修改的对象，索引值，修改后的值) 数据改变，响应式
? ? ? ? Vue.set(this.letters,0,'K')
? ? ? }
}