vue对数组进行操作
push()
push方法是一个常用的数组操作方法,push方法可以在数组尾部添加一个或者多个元素,并放回添加后的数组长度
let arr1 = [1,2,3];
arr1.push(4);
console.log(arr1) //[1,2,3,4]
//示例2
let arr2 = [1,2,3];
let length = arr2.push(4,5)
console.log(arr2); //[1,2,3,4,5]
console.log(length); // 5
pop()
用于删除数组的最后一个元素,并返回被删除的元素
shift()
用于删除并返回数组的第一个元素,同时将数组的长度减一
unshift()
用于在数组的开头添加一个或多个元素,并返回新的数组
data() {
return{
items: ['item1','item2','item3']
}
},
methods: {
addItems() {
this.items.unshift('new item1','new item2');
}
}
// items:['new item1','new item2','item1','item2','item3']
splice()
splice(index,len,item)是vue中数组变异的方法之一,可以用来删除,跟新,和新增数组内容
参数:
index:数组下标
len:为1或0
item:跟新或者增加的内容
使用方法:
-
删除,当参数形式为splice(index,1)时表示删除下标为index的内容
-
跟新,当参数形式为splice(index,1,item)时表示用新的值item更新替换掉下标为index的值
-
增加,当参数形式为splice(index,0,item)时表示在下标为index的位置增加一项值为item
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <title></title> </head> <body> <div id="demo"> <ul> <li v-for="(m,index) in person" :key="index"> <span>{{index}}--</span><span>{{m.name}}--</span><span>{{m.age}}---</span> <button @click="deletep(index)">删除---</button> <button @click="updatep(index,{name:'shanghai',age:304})">更新---</button> <button @click="addp(index,{name:'shanghai',age:132})">增加</button> </li> </ul> </div> </body> <script type="text/javascript"> var vm = new Vue({ el: "#demo", data: { person: [{ name: "zhangsan",age: "112"}, { name: "zhangsan",age: "112"}, { name: "zhangsan",age: "112"}, { name: "zhangsan",age: "112"}] }, methods:{ deletep(index){ this.person.splice(index,1); }, updatep(index,newp){ this.person.splice(index,1,newp) }, addp(index,newp){ this.person.splice(index,0,newp) } } }) </script> </html>
sort()
用于对数组进行排序
常规使用
var arry = [9,5,6,7,5,6,3,1,0]
arry.sort() // [0, 1, 3, 5, 5, 6, 6, 7, 9]
数组排序
var points = [
{name:'KBC',data:9},
{name:'CBC',data:8},
{name:'BBC',data:6},
{name:'EBC',data:1},
{name:'MBC',data:5},
{name:'ABC',data:7}
];
points.sort(function(a, b){
return a.data - b.data
})
字符串排序
按照时间进行排序,最新的时间在最后,其他排序亦可以如此
this.activities.sort((a, b) => {
return b.createTime <= a.createTime ? 1 : -1
});
reverse()
reverse()的作用是将字符进行一个倒序。这个倒序只支持对数组的倒序,用法如下
msg_reverse:function(){//拆分为单个字符后倒序
return this.msg.split('').reverse()
},
自定义指令
定义语法
局部指令
new Vue({
directives:{指令:配置对象}
})
new Vue({
directives{指令名:回调函数}
})
全局指令
Vue.directive(指令名,配置对象)
Vue.directive(指令名,回调函数)
配置对象中常用的3个回调函数
bind()
指令与元素成功绑定时(一上来)
inserted()
指令所在元素被插入页面时
update()
指令所在的模板被重新解析时
备注
- 指令定义时不加v-,但使用时要加v-;
- 指令名如果是多个单词,要使用kebab-case命名方式,不要使用camelCase命名