目录
变更方法
Vue 将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新。这些被包裹过的方法包括:
push() 给末尾加元素
pop() 清除末尾元素
shift() 给数组的第一位进行删除
unshift() 给数组首位添加元素
splice() 删除元素/替换元素/插入元素
sort()
以字母顺序对数组进行排序reverse() 翻转
主体使用代码:
export default{
data(){
return{
list:[1,2,3,4,5,6]
}
},
methods:{
changeList:function(){
//删除末尾元素 变更方法
this.list.pop()
}
}
}
</script>
<template>
<!-- for 循环 key:标识 为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素 -->
<li v-for="item in list" :key="item">
{{item}}
</li>
<button @click="changeList">改变list</button>
</template>
初始样式
1.push()
代码:
methods:{
changeList:function(){
//给末尾加元素
this.list.push(1,2,3)
}
}
}
效果:
2.pop()
代码:
changeList:function(){
//删除末尾元素
this.list.pop()
}
效果:
3.shift()
代码:
methods:{
changeList:function(){
//删除末尾元素
this.list.shift()
}
}
效果:
4.unshift()
代码:
methods:{
changeList:function(){
//删除末尾元素
this.list.unshift(2,3,4)
}
}
效果:
5.splice()
方法参数说明:
第一个参数:表示开始插入或者开始删除的元素的位置下标
第二个参数:
1.删除元素:表示传入要删除几个元素(如果没有传入,代表删除后面所有元素)
2.插入元素:传入0 =>[并且后面参数添加要插入的元素]
3.替换元素:表示替换几个元素 [后面参数表示要替换的元素值]
删除元素:
代码
methods:{
changeList:function(){
//删除元素
this.list.splice(2,3)
}
}
结果
插入元素:
代码
methods:{
changeList:function(){
//插入元素
this.list.splice(2,0,4,22)
}
}
结果
替换元素:
代码
methods:{
changeList:function(){
//替换元素
this.list.splice(2,2,4,22)
}
}
结果:
6.sort()
数字排序
默认地,sort()
函数按照字符串顺序对值进行排序。
该函数很适合字符串("Apple" 会排在 "Banana" 之前)。
不过,如果数字按照字符串来排序,则 "25" 大于 "100",因为 "2" 大于 "1"。
正因如此,sort()
方法在对数值排序时会产生不正确的结果。
比值函数
比较函数的目的是定义另一种排序顺序。
比较函数应该返回一个负,零或正值,这取决于参数:
function(a, b){return a-b}
当 sort()
函数比较两个值时,会将值发送到比较函数,并根据所返回的值(负、零或正值)对这些值进行排序。
简单案例:
代码
export default{
data(){
return{
list:[1,2,3,41,5,6]
}
},
methods:{
changeList:function(){
//排序
this.list.sort(function(a, b){return a-b})
}
}
}
结果
7.reverse()
代码
methods:{
changeList:function(){
//翻转
this.list.reverse()
}
}
效果