Vue数组的变异⽅法和替换数组
变异⽅法和替换数组
⽬录
1. 变异⽅法(修改原有数据)
push()
接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度
pop()
从数组末尾移除最后⼀项，减少数组的length值，然后返回移除的项
shift()
移除数组中的第⼀个项并返回该项，同时数组的长度减1
unshift()
在数组前端添加任意个项并返回新数组长度
// 将新项添加到数组起始位置:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");
// fruits 将输出：Lemon,Pineapple,Banana,Orange,Apple,Mango
splice()
删除原数组的⼀部分成员，并可以在被删除的位置添加⼊新的数组成员
// 移除数组的第三个元素，并在数组第三个位置添加新元素:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
// 参数1必填，其他参数可选
fruits.splice(2,1,"Lemon","Kiwi");
/
/ fruits 输出结果：Banana,Orange,Lemon,Kiwi,Mango
sort()
调⽤每个数组项的toString()⽅法，然后⽐较得到的字符串排序，返回经过排序之后的数组
reverse()
⽤于反转数组的顺序，返回经过排序之后的数组
2. 替换数组(⽣成新的数组)
filter()
创建⼀个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素vue逗号分割的字符串转数组
// currentValue 必须。当前元素的值
// index 可选。当前元素的索引值
// arr 可选。当前元素属于的数组对象
/
/ thisValue 可选。对象作为该执⾏回调时使⽤，传递给函数，⽤作 "this" 的值。如果省略了 thisValue ，"this" 的值为 "undefined" .filter(function(currentValue,index,arr), thisValue)
concat()
⽅法⽤于连接两个或多个数组。该⽅法不会改变现有的数组
// 参数arrayX必选。该参数可以是具体的值，也可以是数组对象。可以是任意多个。
.concat(arrayX,arrayX,......,arrayX)
slice()
⽅法可从已有的数组中返回选定的元素。该⽅法并不会修改数组，⽽是返回⼀个⼦数组
// 参数1必选，规定开始选取元素的位置；参数2可选，规定结束选取元素的位置
.slice(start,stop)
3. 修改响应式数据
  在改变数组的值的时候，值确实是改变了，但是视图却⽆动于衷，这时候就需要修改响应式数据。
  Vue.set(vm.items, indexOfItem, newValue)
  vm.$set(vm.items, indexOfItem, newValue)
  ①参数⼀表⽰要处理的数组名称  ②参数⼆表⽰要处理的数组的索引  ③参数三表⽰要处理的数组的值  <div id="app">
<ul>
<li v-for='item in list'>{{item}}</li>
</ul>
<div>
<div>{{info.name}}</div>
<div>{{info.age}}</div>
<div>{{der}}</div>
</div>
</div>
<script type="text/javascript">
/*
动态处理响应式数据
*/
var vm = new Vue({
el: '#app',
data: {
list: ['apple', 'orange', 'banana'],
info: {
name: 'lisi',
age: 12
}
},
});
// vm.list[1] = 'lemon';
// Vue.set(vm.list, 2, 'lemon');
vm.$set(vm.list, 1, 'lemon');
// der = 'male';
vm.$set(vm.info, 'gender', 'female');
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。