列表过滤

方法一：watch

<div id="app">
    <h2>人员列表</h2>
    <input type="text" v-model="keyword" placeholder="请输入姓名">
    <ul>
        <li v-for="(value,index) in filperson">
            {{value.name}}-{{value.age}}-{{value.sex}}
        </li>
    </ul>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            keyword:"",
            person:[
                {name:"小米",age:19,sex:"男"},
                {name:"小例",age:18,sex:"男"},
                {name:"小时",age:16,sex:"女"},
                {name:"小发",age:29,sex:"女"},
            ],
            filperson:[]
        },
        watch:{
            keyword:{
                immediate:true,
                handler(val){
                    this.filperson=this.person.filter((p)=>{
                        return p.name.indexOf(val)!==-1
                    })
                }
            }
        }
    })
</script>

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意： filter() 不会对空数组进行检测。

注意： filter() 不会改变原始数组。

例：

var ages = [32, 33, 16, 40];



function checkAdult(age) {

return age >= 18;

}



function myFunction() {

document.getElementById("demo").innerHTML = ages.filter(checkAdult);

}

方法二：computed

<div id="app">
    <h2>人员列表</h2>
    <input type="text" v-model="keyword" placeholder="请输入姓名">
    <ul>
        <li v-for="(value,index) in filperson">
            {{value.name}}-{{value.age}}-{{value.sex}}
        </li>
    </ul>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            keyword:"",
            person:[
                {name:"小米",age:19,sex:"男"},
                {name:"小例",age:18,sex:"男"},
                {name:"小时",age:16,sex:"女"},
                {name:"小发",age:29,sex:"女"},
            ],
        },
        computed:{
            filperson(){
               return this.person.filter((p)=>{
                        return p.name.indexOf(this.keyword)!==-1
                    })
            }
        }
        
    })
</script>

列表排序：

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="GBK">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body> 
<div id="root">
    <h2>人员列表</h2>
    <input type="text" v-model="keyword" placeholder="请输入姓名">
    <br>
    <button @click="sortType=2">年龄升序</button> 
    <button @click="sortType=1">年龄降序</button> 
    <button @click="sortType=0">原顺序</button>

    <ul>
        <li v-for="(value,index) in filperson">
            {{value.name}}-{{value.age}}-{{value.sex}}
        </li>
    </ul>
</div>
<script>
    new Vue({
        el:"#root",
        data:{
	    sortType:0,
            keyword:"",
            person:[
                {name:"小米",age:19,sex:"男"},
                {name:"小例",age:18,sex:"男"},
                {name:"小时",age:16,sex:"女"},
                {name:"小发",age:29,sex:"女"},
            ],
        },
        computed:{
            filperson(){
               const arr = this.person.filter((p)=>{
			
                        return p.name.indexOf(this.keyword)!==-1
                    })

		//判断是否要排序
		if(this.sortType){
		    arr.sort((p1,p2)=>{
			return this.sortType===1?p2.age-p1.age:p1.age-p2.age
	            })
		}

		return arr

            }
        }
        
    })
</script>
        
    </body>
</html>

监视总结

Vue监视数据的原理:
        1. vue会 监视data中所有层次的数据。
        2.如何监测对象中的数据?
                通过Setter实现监视。且要在new Vue时就传入要监测的数财。
                        (1).对象中后追加的属性，Vue默认不做响应式处理
                        (2).如需给后添加的属性做响应式，请使用如下API:
                                Vue.set (target, propertyName/index. value) 或
                                Vm.$set(target. propertyName/ index, value ) 
        3.如何监测数组中的数据?
                通过包裹数组更新元素的方法实现，本质就是做了两件事:
                        (1).调用原生对应的方法对数组进行更新。
                        (2).重新解析模板，进而更新页面。
        4.在Vue修改数组中的某个元素定 要用如下方法:
                1.使用这些API:push()、pop()、 shift()、 unshift()、 splice(),sort()、 reverse( )
                2.Vue.set()或vm.$set()
        特别注意: Vue.set() 和vm.$set() 不能给vm 或vm的根数据对象添加属性! ! 
 

实例： 

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="GBK">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body> 
<div id="root">
    <h2>人员列表</h2>
    <button @click="student.age++">年龄加一</button>
    <button @click="addSex">添加性别</button>
    <button @click.once="addFriend">在第一个位置添加朋友</button><br> 
    <button @click="updateFriendName">修改朋友姓名</button>
    <button @click="removeHobby2">移除hobby2</button>
    <button @click.once="addHobby">添加爱好</button><br>

    <h2>姓名:{{student.name}}</h2>
    <h2>年龄：{{student.age}}</h2>
    <h2 v-if="student.sex">性别:{{student.sex}}</h2>
    <h2>爱好</h2>
    <ul>
	<li v-for="(value,index) in student.hobby" :key="index">
            {{value}}
        </li>
    </ul>
    <h2>朋友</h2>
    <ul>
        <li v-for="(value,index) in student.friends" :key="index">
            {{value.name}}-{{value.age}}
        </li>
    </ul>
</div>
<script>
    new Vue({
        el:"#root",
        data:{
	    student:{
		name:"alice",
	        age:18,
	        hobby:["hobby1","hobby2","hobby3"],
	        friends:[
		    {name:"zzx",age:18},
		    {name:"zzy",age:19},
		    {name:"zzz",age:20}
	        ]
	    }
	    
	   
        },
        methods:{
	    addSex(){
		//追加属性
		//Vue.set(this.student,"sex","男")
		this.$set(this.student,"sex","男")
	    },
	    addFriend(){
		//追加数组值
		this.student.friends.unshift({name:"zza",age:10})
	    },
	    updateFriendName(){
		this.student.friends[0].name="xugai"
	    },
	    removeHobby2(){
		this.student.hobby=this.student.hobby.filter((h)=>{
		    return h!=="hobby2"
		})
	    },
	    addHobby(){
		this.student.hobby.push("hobby4")
	    }
	    
           
        }
        
    })
</script>
        
    </body>
</html>

收集表单数据


        若: <input type="text"/>. 则v - model收集的是value值，用户输入的就是value值。
        若: <input type= "radio"/>,则v - model收集的是value值。且要给标签配置value值。
        若: <input type= ”checkbox"/>
                1.没有配置input的value属性，那么收集的就是checked (勾选or未勾选，是布尔值)
                2.配置input的value属性:
                        (1 )v- mode1的初始值是非数组，那么收集的就是checked 
                        (2)v- model的初始值是数组，那么收集的的就是value组成的数组
        备注: v-model的 三个修饰符:
                lazy:失去焦点再收集数据
                number:输入字符串转为有效的数字
                trim:输入首尾空格过滤

实例：

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="GBK">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body> 
	<div id="root">
	    <form @submit.prevent="demo">
		账号：<input type="text" v-model.trim="userInfo.name"><br/><br/>
		密码:<input type="password" v-model="userInfo.password"><br/><br/>
		年龄：<input type="number" v-model.number="userInfo.age"><br/><br/>

		性别：
		男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
		女<input type="radio" name="sex" v-model="userInfo.sex" value="female"><br/><br/>

		爱好：
		学习<input type="checkbox"  v-model="userInfo.hobby" value="study">
		游戏<input type="checkbox"  v-model="userInfo.hobby" value="game">
		吃饭<input type="checkbox"  v-model="userInfo.hobby" value="eat"><br/><br/>

		所属校区
		<select v-model="userInfo.city">
		    <option value="">请选择校区</option>
		    <option value="ShanDong">山东</option>
		    <option value="BeiJing">北京</option>
		    <option value="HeBei">河北</option>		
		</select><br/><br/>

		其他信息
		<textarea v-model.lazy="userInfo.other"></textarea><br/><br/>

		<input type="checkbox"  v-model="userInfo.agree">同意并接受协议<br/><br/>

		<button>提交</button>
	    </form>
    
	</div>
	<script>
	new Vue({
    	    el:"#root",
	    data:{
		userInfo:{
		    name:"",
		    password:"",
		    sex:"female",
		    hobby:[],
		    city:"ShanDong",
		    other:"",
		    agree:""

		}
	   
      	    },
      	    methods:{
	    	demo(){
		    console.log(JSON.stringify(this.userInfo))
		}
	    
           
      	    }
        
	})
	</script>
        
    </body>
</html>

过滤器 


定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。
语法:
1.注册过滤器: Vue.filter(name, callback)或new Vue{filters :{}}
2.使用过滤器: {{ xxx| 过滤器名}} 或v-bind:属性 = "xx| 过滤器名"
备注:
1.过滤器也可以接收额外参数、多个过滤器也可以串联
2.并没有改变原本的数据，是产生新的对应的数据
 

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="GBK">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<!--负责时间格式化-->
	<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.4.1/dayjs.min.js"></script>
    </head>
    <body> 
	<div id="root">
	    <h2>显示格式化后时间</h2>
	    <!--计算属性实现-->
	    <h3>时间是：{{fmtTime}}</h3><br/><br/>
    
	    <!--methods实现-->
	    <h3>时间是：{{getFmtTime()}}</h3><br/><br/>

	    <!--过滤器实现-->
	    <h3>时间是：{{time|timeFormater}}</h3><br/><br/>

	    <!--过滤器实现（传参）+ 多过滤器使用-->
	    <h3>时间是：{{time|timeFormater("YYYY:MM:DD")|mySlice}}</h3><br/><br/>


	    
    	   
    
	</div>
	<script>

	new Vue({
    	    el:"#root",
	    data:{
		time:1648518723
      	    },
      	    methods:{
	    	getFmtTime(){
		    return dayjs(this.time).format("YYYY年MM月DD日 HH:mm:ss")
		}
      	    },
	    computed:{
		fmtTime(){
		    return dayjs(this.time).format("YYYY年MM月DD日 HH:mm:ss")
		}
	    },
	    filters:{
		timeFormater(value,str="YYYY年MM月DD日"){
		   return dayjs(value).format(str)
		},
		mySlice(value){
		   return value.slice(0,4)
		}
	    }
        
	})
	</script>
        
    </body>
</html>

# vue.js # javascript
Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

cover

vue+element ui实现好看的登录界面

avatar ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

avatar ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

avatar ViewDesign