修改数据

添加（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.js # 前端 # javascript
Logo
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}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue