VUE表格例子

修改数据添加（push(obj)/unshift(obj)）<body><div id="d1"><input type="text" v-model="id"/><input type="text" v-model="name"/><br/><input type="button"value="up" @click="up"/&g

木叶二柱子

2736人浏览 · 2022-01-05 09:46:49

木叶二柱子 · 2022-01-05 09:46:49 发布

修改数据

添加（push(obj)/unshift(obj)）

<body>
	<div id="d1">	
        <input type="text" v-model="id"/>
		<input type="text" v-model="name"/><br/>
		<input type="button"  value="up" @click="up"/>
		<input type="button"  value="down" @click="down"/>
		<div v-for="(value,key) in list">
			{{key}}——{{value}}
		</div>
	</div>
	<script>
		var vue = new Vue({
			el:"#d1",
			data:{
				list:[{id:1,name:"aa"},{id:2,name:"bb"},],
				id:null,
				name:null
			},
			methods:{
				up(){
					this.list.unshift({id:this.id,name:this.name});
				},
				down(){
					this.list.push({id:this.id,name:this.name});
				}
			}
		});
	</script>
</body>

删除/修改/添加（splice(index,num)）

del(key){
	this.list.splice(key,1);
}

注意：

添加：splice(2,0,“Lemon”,“Kiwi”)
删除：splice(2,1)
修改：splice(2,1,“lzy”)（删除2，在2的位置添加lzy）

查找数据

全查找（some()）

search(id){
	this.list.some(function(obj,i){
		if(obj.id ==  id){
			alert(i+' '+ obj.id +' '+obj.name);
			return true;
		}
	});
}

根据内容查找findIndex()，返回索引

search2(id){
	this.index= this.list.findIndex(function(obj){
		if(obj.id ==  id){
			return true;
		}
	});
	alert(this.index);
}

模糊查询(filter+includes)(forEach)

like(key){
	var res = null;
	res = this.list.filter(function(obj){
        if(obj.name.includes(key)){
			return true;
		}
	});
	return res;
}

like2(key){
	var res = [];
	this.list.forEach(function(obj){
		if(obj.name.includes(key)){
			res.push(obj);
		}
	});
	return res;
}

方法总结

1)遍历方法：

都是数组的新方法，都会对数组中的每一个元素进行遍历，进行相关的操作。

forEach() 循环查找。没办法终止

findIndex() 循环查找，有办法终止，有返回值，查找时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会在循环。

some() 循环查找。可以通过return true进行终止

filter() 循环过滤，有返回值，返回一个新数组

2)其它方法

push(str) 向list加追加

splice(i,1) 向数组中删除，或添加splice(i,0,xx);

indexOf() 查找指定字符的索引，查找没有返回-1 ,（空串“”）返回是0

charAt() 查找指定索引下字符

includes() 查找有返回true没有返回false, includes（空串“”）返回是true

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^