vue基础三：列表渲染、列表过滤及排序、过滤器filters、form数据收集

最新推荐文章于 2022-12-16 22:14:12 发布

冷凝娇

最新推荐文章于 2022-12-16 22:14:12 发布

阅读量551

点赞数

分类专栏： # vue 文章标签： vue.js

本文链接：https://blog.csdn.net/ak739105231/article/details/121515507

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

列表数据收集、列表过滤及排序、过滤器filters

- - - - 一、列表渲染：v-for \ :key的关键作用
        二、form过滤
        三、form排序
        四、form收集数据：v-model的三大修饰符
        五、vm中的filters关键字：过滤器

一、列表渲染：v-for \ :key的关键作用

<body>
		<div id="app">
			<button type="button" @click.once="addliu($event)">添加一个老刘</button>
			<ul>
				<li v-for="(p,index) in persons" :key="p.id">{{p.name}}-----{{p.age}} 
				<input type="" name="msg" id="" placeholder="" />		
				</li>
			</ul>
		</div>
		
		<script type="text/javascript">
			const vm =new Vue({
				data:function(){
					return{
						persons:[
							{id:'001',name:'张三',age:18},
							{id:'002',name:'李四',age:20},
							{id:'003',name:'王五',age:30}
						]
					}
				},
				methods:{
					addliu: function(){
						const p ={id:'004',name:'葛六',age:40}
						this.persons.unshift(p)
					}
				}
			})
			vm.$mount('#app')
		</script>
	</body>

二、form过滤

<body>
		<script type="text/javascript">
			/*const vm = new Vue({
				data:function(){
					return{
						keyword:"",
						persons:[
							{id:'0001',name:'马冬梅',age:18,sex:'女'},
							{id:'0002',name:'周冬雨',age:22,sex:'女'},
							{id:'0003',name:'周杰伦',age:44,sex:'男'},
							{id:'0004',name:'温兆伦',age:44,sex:'男'}
						],
						filpersons:[]
					}
				},
				// 采用监视属性的方式写模糊匹配
				watch:{
					keyword:{
						immediate:true,
						handler(v){
							this.filpersons = this.persons.filter((p)=>{
								return p.name.indexOf(v) !==-1
							})
						}
					}
				}
			})
			vm.$mount("#app")
			*/
		   //采用计算属性实现模糊匹配
			const vm = new Vue({
				data:function(){
					return{
						keyword:"",
						persons:[
							{id:'0001',name:'马冬梅',age:18,sex:'女'},
							{id:'0002',name:'周冬雨',age:22,sex:'女'},
							{id:'0003',name:'周杰伦',age:44,sex:'男'},
							{id:'0004',name:'温兆伦',age:44,sex:'男'}
						]
					}
				},
				computed:{
					filpersons(){
						 return this.persons.filter((p)=>{
							return p.name.indexOf(this.keyword)!==-1
						})
					}
				}
			})
			vm.$mount('#app')
		</script>
	</body>

三、form排序

<body>
		<div id="app">
			<input type="text" v-model="keyword" placeholder="输入关键字"/>
			<button type="button" @click="sorttype =2">年龄升序</button>
			<button type="button" @click="sorttype =1 ">年龄降序</button>
			<button type="button" @click="sorttype =0">原</button>
			<ul>
				<li v-for="p in pers" :key="p.id">{{p.name}}-------{{p.age}}---{{p.sex}}</li>
			</ul>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				data:function(){
					return{
							keyword:"",
							sorttype:0,//0原顺序1降序2升序
							persons:[
								{id:'0001',name:'马冬梅',age:18,sex:'女'},
								{id:'0002',name:'周冬雨',age:22,sex:'女'},
								{id:'0003',name:'周杰伦',age:19,sex:'男'},
								{id:'0004',name:'温兆伦',age:44,sex:'男'}
							]
						}
				},
				computed:{
					pers(){
						const arr =  this.persons.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
					}
				}
					
			})
			vm.$mount('#app')
		</script>
	</body>

			<!-- 
 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的根数据对象添加属性！！！
			 -->

四、form收集数据：v-model的三大修饰符

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

<body>
		<div id="app">
			<form @submit.prevent="submit1">
				<label for="demo">账号：</label>
				<!-- v-model的trim修饰符：主动去除前后空格 -->
				<input type="text" id="demo" v-model.trim="account"/><br><br>
				
				<label for="demo1">密码：</label>
				<input type="password" id="demo1" v-model="pwd"/><br><br>
				
				<label for="demo2">性别：</label>
				男<input type="radio" name="sex" v-model="sex" value="1"/>
				女<input type="radio" name="sex" v-model="sex" value="0"/><br><br>
				<!-- v-model修饰符：number 输入的为数字，而不是str -->
				<label for="demo2">年龄：</label>
				<input type="number" v-model.number="age" /><br><br>
				
				<label for="demo3"> 爱好：</label>
				学习<input type="checkbox" v-model='hobby' value="学习" />
				游戏<input type="checkbox" v-model='hobby' value="游戏" />
				旅游<input type="checkbox" v-model='hobby' value="旅游" /><br><br>
				
				<label for="demo4">所属校区：</label>
				<select v-model="city">
					<option value ="">请选择校区</option>
					<option value ="shanghai">上海</option>
					<option value ="beijing">北京</option>
					<option value ="chengdu">成都</option>
					<option value ="wuhan">武汉</option>
				</select><br><br>
				<label for="demo4">其他描述：</label><br><br>
				<!-- lazy,v-model失去焦点才获取最新数据 -->
				<textarea v-model.lazy="others"></textarea><br><br>
				<input type="checkbox" v-model="istrue"/>阅读并接受<a href="http://www.baidu.com" target="_blank">《用户协议》</a>
				<button type="submit">提交</button>
			</form>
		</div>
		
		<script type="text/javascript">
			const vm = new Vue({
				data:function(){
					return{
						account:'',
						pwd:'',
						age:'',
						sex:'0',
						hobby:[],
						city:'',
						others:'',
						istrue:''
					}
				},
				methods:{
					submit1:function(e){
						//收集到数据：this._data
						console.log(JSON.stringify(this._data))
						console.log(this._data)
					}
				}
			})
			vm.$mount("#app")
		</script>
	</body>

五、vm中的filters关键字：过滤器

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

<body>
		<div id="app">
			<h2>显示格式化</h2>
			<!-- computed实现 -->
			<h3>现在是：{{fmttime}}</h3>
			<!-- methods实现 -->
			<h3>现在是：{{getfmttime()}}</h3>
			<!-- 过滤器实现 -->
			<h3>现在是：{{time | timeFormater}}</h3>
			<h3>现在是：{{time | timeFormater('YYYY-MM-DD')}}</h3>
		</div>
		
		<script type="text/javascript">
			const vm = new Vue({
				data:function(){
					return{
						time:Date.now()
					}
				},
				computed:{
					fmttime:function(){
						return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
					}
				},
				methods:{
					getfmttime:function(){
						return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
					}
				},
				filters:{
					timeFormater:function(value,strtype='YYYY-MM-DD HH:mm:ss'){
						return dayjs(value).format(strtype)
					}
				}
			})
			vm.$mount('#app')
		</script>
	</body>

冷凝娇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue基础三：列表渲染、列表过滤及排序、过滤器filters、form数据收集

列表数据收集、列表过滤及排序、过滤器filters一、列表渲染：v-for \ :key的关键作用二、form过滤三、form排序四、form收集数据：v-model的三大修饰符五、vm中的filters关键字：过滤器一、列表渲染：v-for \ :key的关键作用<body> <div id="app"> <button type="button" @click.once="addliu($event)">添加一个老刘</button&g
复制链接

扫一扫