Vue经典实例之数据搜索、数据过滤（简单易懂）

重点：1.搜索框input用到双向绑定v-model2.列表展示用到computed计算属性<!DOCTYPE html><html><head><meta charset="GBK"><title></title><style>* {margin: 0px;padding: 0px;}body {margin:

编程界明世隐

3823人浏览 · 2020-12-11 09:35:26

编程界明世隐 · 2020-12-11 09:35:26 发布

重点：

1.搜索框input用到双向绑定v-model

2.列表展示用到computed计算属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="GBK">
		<title></title>
		<style>
* {
	margin: 0px;
	padding: 0px;
}

body {
	margin: 20px;
	font-family: Arial, "宋体";
	font-size: 12px;
	line-height: 20px;
	color: #333333;
}
</style>
	</head>
	<body>
		<div id="app">
			<input type='text' v-model='content'>
			<ul>
				<li v-for="(item,i) in newList" :key="i">
					{{item.name}}---{{item.age}}
				</li>
			</ul>
		</div>
	</body>
	<script src="vue.js"></script>
	<script>
       var vm = new Vue({
            el: '#app',
            data: {
            	content:'',
            	list:[
            		{name:'张三',age:20},
            		{name:'李四',age:21},
            		{name:'王五',age:22},
            		{name:'小三子',age:23},
            		{name:'李老大',age:24},
            		{name:'大猪头',age:25},
            	]
            },
            computed:{
            	newList:function(){
            		let content=this.content;
            		//使用循环
            		/*let arr=[];
             		this.list.forEach(function(item){
            			if(item.name.indexOf(content)!=-1){
            				arr.push(item);
            			}
            		})
            		return arr;*/
            		
            		//使用filter函数
            		return this.list.filter(function(item){
            			return item.name.indexOf(content)!=-1;
            		});
            	}
            },
            methods:{
            }
        });
    </script>
</html>

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}$/, //不连续的两位字母// /^