1. push()
-
push()是响应式的 在数组的最后添加一个元素。
2. pop()
-
pop()是响应式的 从数组的最后弹出一个元素 删除数组中的最后一个元素。
3. shift()
-
shift()删除数组中的第一个元素。
4. unshift()
-
unshift()在数组的最前面添加元素。
5. splice()
splice() 的作用 删除元素/插入元素/替换元素。
删除元素: 第一个参数是操作的开始位置，第二个参数是你要删除几个元素，如果第二个参数不传递则删除所有。
插入元素:第一个参数是操作的开始位置 ， 第二个参数传递0，后面跟上插入的元素即可。
替换元素:第一个参数是操作的开始位置，第二个参数表示我们要替换几个元素，后面是用于替换前面的元素的。
6. sort()
- 方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的。
7. reverse()
-
reverse()数组逆转的方法。
8. Vue.set(array,index,'xxx')
-
Vue.set(array,index,'xxx')vue自带的set方法也可以实现数组的响应式变化。
使用数组下标修改数组元素的值不是响应式的。
代码演示
<div id="app">
<ul>
<li v-for="item in letters" :key="item">{{item}}</li>
</ul>
<button @click="btnClick">操作</button>
<ul>
<li v-for="item in numbers" :key="item">{{item}}</li>
</ul>
<button @click="btnClickSort">排序</button>
<ul>
<li v-for="item in reverse" :key="item">{{item}}</li>
</ul>
<button @click="btnClickReverse">逆序</button>
<ul>
<li v-for="item in popOpt" :key="item">{{item}}</li>
</ul>
<button @click="btnClickPop">pop</button>
<ul>
<li v-for="item in pushOpt" :key="item">{{item}}</li>
</ul>
<button @click="btnClickPush">push</button>
<ul>
<li v-for="item in shiftOpt" :key="item">{{item}}</li>
</ul>
<button @click="btnClickShift">shift</button>
<ul>
<li v-for="item in unShiftOpt" :key="item">{{item}}</li>
</ul>
<button @click="btnClickUnShift">UnShift</button>
</div>
<script src="../../js/vue.js"></script>
const app = new Vue({
el: '#app',
data: {
letters: ['a', 'b', 'c', 'd'],
numbers: [1, 20, 31, 42, 5, 6],
reverse: ['a', 'b', 'c', 'd'],
popOpt: ['e', 'f', 'g', 'h'],
pushOpt: ['e', 'f', 'g', 'h'],
shiftOpt: ['a', 'b', 'c'],
unShiftOpt: [1, 2, 3, 4, 5, 6]
},
methods: {
btnClick() {
this.letters[0] = '6666'; // 这个不是响应式的哦
// push() 是响应式的 在数组的最后添加一个元素
// pop() 是响应式的 从数组的最后弹出一个元素 删除数组中的最后一个元素
// shift() 删除数组中的第一个元素
// unshift() 在数组的最前面添加元素
// splice的作用 删除元素/插入元素/替换元素
// 1. 删除元素: 第一个参数是操作的开始位置，第二个参数是你要删除几个元素，如果第二个参数不传递则删除所有
// 2. 插入元素: 第二个参数传递0，后面跟上插入的元素即可
// 3. 替换元素:第二个参数表示我们要替换几个元素，后面是用于替换前面的元素的
// splice()
// 3. 替换元素,
this.letters.splice(1, 3, 'm', 'n', 'l'); //
// 2. 插入元素
this.letters.splice(1, 0, 'e', 'f');
// 替换元素
this.letters.splice(1, 1, 'F');
// sort()
// reverse()
// set 方法修改
Vue.set(this.letters, 0, 'cccc');
},
/**
* 进行排序操作
*/
btnClickSort() {
console.log(this.numbers.sort((a, b) => {
return a - b;
}));
},
/**
* 逆转数组
*/
btnClickReverse() {
this.reverse.reverse();
},
/**
* 从数组末尾弹出一个元素
*/
btnClickPop() {
this.popOpt.pop();
},
/**
* 在数组的末尾插入一个或多个元素
*/
btnClickPush() {
this.pushOpt.push('f', 'g', 'h', 'j', 'k');
},
/**
* 删除数组的第一个元素
*/
btnClickShift() {
this.shiftOpt.shift();
},
btnClickUnShift() {
this.unShiftOpt.unshift('f', 'g', 'h', 'j', 'k');
}
}
});
