vue(三)

已于 2022-04-08 10:16:28 修改
阅读量6.7k 收藏 21
点赞数 19
分类专栏： vue 文章标签： vue.js javascript
于 2022-03-12 11:34:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53293179/article/details/123337834
版权

列表过滤

方法一：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>

南城孤巷
关注
  • 19
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Cube.vue 三维立方体 vue 组件
04-30
一个vue组件 （**.vue）
vue3数组操作学习
weixin_43871703的博客
03-09 1万+
Vue3操作数组的那些小技巧！
vue3中定义数组
reembarkation的博客
01-09 1652
vue3中定义数组
vue2源码解析——new Vue()这个过程究竟做了什么？
最新发布
三月和九月的博客
04-02 847
new Vue() 是 Vue.js 框架中用于创建根 Vue 实例的语法。当我们使用 Vue.js 构建一个单页面应用时，通常会先创建一个根 Vue 实例，然后在该实例中定义应用的数据、方法、计算属性等，以及挂载根组件。具体来说，new Vue() 的作用是：创建一个 Vue 实例，该实例代表整个 Vue 应用的根实例。通过传入的选项对象来配置该 Vue 实例，包括数据、计算属性、方法、生命周期钩子函数等。将该 Vue 实例挂载到一个真实的 DOM 元素上，使得应用
vue定义数组对象
Lemon_Haner的博客
11-16 1万+
options就是要定义的数组对象,先进行for循环,然后对对象参数进行赋值 personQueryList(this.paramType).then(res => { for (let i = 0; i < res.records.length; i++) { this.options[i] = { label: res.records[i].name, value: res.records[i].code } } }) ...
vue中数组的相关方法
lzzw的学习之路
04-08 1647
1，锁定数组的长度(只读模式)[ Array.join() ] var a = [1,2,3] //定义一个数组<br> Object.defineProperty(a,"length",{ writable:false }) //将a数组的长度属性设为只读<br> a.length = 0 //将a的长度改为0<br> console.log(a.length); //打印a数组的长度，还是3 2、将数组合并成字符串（返回字符串）[ Array.j
vue在哪里定义数组_Vue源码解读——变化侦测篇
weixin_35231615的博客
01-12 5604
点击上方蓝字关注我们前言作为一名前端开发，掌握Vue也是必要的。尽管我们对Vue的用法已经较为熟练了，可能在实际项目中也足以应付。但是我们对Vue的各种用法和api只能是知其然，不知其所以然。有鉴及此，我们可以从github上拉取一份Vue的源码以供学习参考之用。源码目录Vue源码目录大致如下：从上面的目录结构可以看出，Vue的整个项目包含了类型检测相关、单元测试相关、与平台无关的核心代...
简单的vue三级联动下拉框代码
06-11
一款简单的基于vue实现的三级联动下拉框代码，适用于各种三级联动下拉菜单选择功能。
Vue三层嵌套路由的示例代码
08-27
本篇文章主要介绍了Vue三层嵌套路由的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue三级路由
06-25
vue如何使用二级路由和三级路由,以及路由的引用,路由的抽离
Vue3中观察ref定义的数组的用法大全
parade岁月的博客
06-24 1万+
数组是JavaScript常用的一种数据格式，在Vue3中使用数组作为响应式数据，应该有两种方式，一种是用包裹，一种是用，一般来说，用定义基本数据，用数据，之所以大家都喜欢用定义数组，可能是改变(清空或者重新赋值)数组方便,直接,这就造成了用监听定义的数组有不同的写法首先数组的变化分两种1️⃣数组本身的变化(数组长度的变化)2️⃣数组元素的变化数组被替换，常规写法，这样可以检测到变化 使用数组的变更方法()， 数组元素的变化 创建时已经初始化了元素数据的数组–这种方式对于数组里是复杂数据也可以
vue踩坑记录之数组定义和赋值问题
10-17
主要给大家介绍了关于vue踩坑记录之数组定义和赋值问题的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
vue3中的ref 和 reactive 定义数组
热门推荐
qq_58247332的博客
10-11 2万+
vue3定义数组的两种方法
Vue3快速入门(二)
赤蓝紫の博客
03-01 1352
Vue3快速入门(二) 个人博客：Vue3快速入门(二) 1. 父子组件间的数据共享 1.1 props父传子 子组件 <template> <h2>{{props.name}}</h2> <!-- 可省略prop. --> <h2>{{name}}</h2> </template> <script setup> const props = defineProps({ // defineProp
vue的数组方法
wanan1215的博客
06-13 1949
1.变异方法 push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。pop() 方法用于删除并返回数组的最后一个元素。shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。sort() 方法用于对数组的元素进行排序。reverse() 方法用于颠倒数组中元素的顺序。2.替换数组 filter() 方法创建一个新的数组，新数组中的
vue中常用的数组方法
真真的博客
07-28 3954
Vue中常用的数组方法 .filter()、.map()、.forEach()、.find()、.findIndex()、.some()、.every() .filter() .map() .forEach() .find() .findIndex() .some() .every() .filter() filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。 是否改变原数组：否 是否对空数组进行检测：否 语法： const arr= [32, 33
vue3的基本使用(超详细)
qq_43332008的博客
10-10 1746
vue3的基本使用(超详细)
vue3和vue创建二维数组的不同
前端小白到专家的博客
04-22 6687
问题描述 提示：这里描述具体问题：在项目中遇到需要数组中包含数组，类似[[1,2,2],[1,2,3]]。 例如：首先需要定义一个二维数组，在vue中定义为 const arr = [[]],然后在二维数组赋值时需要在每一行新创建数组。 // 定义 const arr = [[]] //在使用时，需要创建一个一维数组，否则会报错。 arr[i] = [] // 赋值 arr[i][j] = 1 首先需要定义一个二维数组，在vue3原型链中定义为 const arr = ref([[]]),然后在二维数组
Vue中常用的数组方法
weixin_44488149的博客
07-19 966
.filter()、.map()、.forEach()、.find()、.findIndex()、.some()、.every()
vue三级联动下拉菜单
05-01
Vue三级联动下拉菜单是指一个三级级联的下拉菜单实现，其中每个层级的选项列表将随着前面选择的选项而动态更新。 实现Vue三级联动下拉菜单的步骤如下： 1. 定义绑定数据：首先需要定义三个数据对象，即第一级选项列表、第二级选项列表和第三级选项列表，以及他们的初始值。这些数据对象将通过Vue的数据绑定机制与前端界面绑定。 2. 实现选项列表的动态更新：当用户选择一级选项时，需要根据该选项对应的规则获取二级选项列表。同样的，当用户选择二级选项时，需要根据该选项对应的规则获取三级选项列表。这一步需要结合Vue的computed属性和watch机制实现。 3. 绑定前端交互事件：通过v-on指令将用户选择事件与Vue的方法绑定。当用户选择一级选项时将触发与该数据对象绑定的方法，在该方法中更新二级选项列表并清空三级选项列表。当用户选择二级选项时，将触发与该数据对象绑定的方法，在该方法中更新三级选项列表。 4. 前端界面的渲染：根据Vue的数据绑定机制，当数据对象改变时，前端界面上的内容也要相应地改变。因此，需要使用v-for指令结合绑定的数据对象遍历选项列表，并使用v-model指令将用户选择的选项与对应数据对象绑定。 总之，Vue三级联动下拉菜单是一种方便实用的前端交互方式，能够让用户在选择选项时更加快速和准确。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值