vue数组学习笔记

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命名
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值