常用的方法
在 Vue 里数组方法也会触发视图更新。
<body>
<div id="app">
<ul>
<li v-for="study in arr">
{{study}}
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
arr: [
'book',
'pen',
'pencli'
]
}
})
</script>
push()
pop()
shift()
unshift()
splice()
可以添加/删除数组,返回值是删除的元素
三个参数,第一个参数表示 开始操作的位置(下标/索引)
第二个参数表示 要操作的长度
第三个参数表示 要添加的元素
arr=[
'book',
'pen',
'pencli'
]
arr.splice(1,1)
//arr:['book', 'pencli']
arr.splice(0,0,'lili')
//arr:['lili', 'book', 'pencli',]
sort()和 reverse()
<body>
<div id="app">
<ul>
<li v-for="study in arr">
{{study}}
</li>
</ul>
<button @click="sortArry">从小到大排序</button>
<button @click="reverseArry">反转数组排序</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
arr: [
'book',
'pen',
'pencli'
]
},
methods: {
sortArry() {
this.arr.sort(function (a, b) {
return a.length - b.length
})
},
reverseArry() {
this.arr.reverse()
}
}
})
</script>
不能触发视图更新的有哪些呢
例如 filter()
、concat()
和 slice()
。它们不会变更原始数组,而总是返回一个新数组
场景:
- 改变数组中的指定项,(变更数组)
- 改变数组的长度(app.splice(1))
Vue里面给我们内置了一个 set()方法应对这样的情况
Vue.set(target, index,value)
Vue.set(app.arr, 1, 'car')
//arr => ['book', 'car', 'pencli']
通过计算属性来实现数组过滤
<-html->
计算属性来实现数组过滤<br>
数组中含有 'oo' 的项:{{matchoo}}
<-Vue实例 ->
<script>
computed:{
matchoo(){
return this.arr.filter(function (book) {
return book.match(/oo/)
})
}
},
</script>
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组更新</title>
</head>
<body>
<div id="app">
<div v-for="study in arr">{{study}}</div>
<button @click="sortArr">点我排序</button>
<button @click="reserveArr">点我进行数组的翻转</button>
<hr>
下面的按钮没效果,不信你试试看
<button @click="changeOne">改变数组的指定项</button>
<button @click="changeArrLength">改变数组的长度</button>
<hr>
返回字符串中含有oo的项:
{{ matchOO }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
arr:['book','pen','pencil']
},
computed:{
matchOO:function () {
//参数代表要过滤的每一项
return this.arr.filter(function (book) {
return book.match(/oo/);
});
}
},
methods:{
//利用sort方法进行排序
sortArr:function () {
this.arr.sort(function (a,b) {
//从小到大排
return a.length- b.length;
});
},
reserveArr:function () {
this.arr.reverse();
},
//改变数组的指定项
changeOne:function () {
this.arr[0] = "car";
},
//改变数组的长度
changeArrLength:function () {
this.arr.length = 1;
}
}
})
//改变vue的第一项
Vue.set(app.arr,1,"car");
</script>
</body>
</html>