#【Vue】第四部分列表（渲染、排序、过滤）

文章目录

4. 列表（渲染、排序、过滤）
- 4.1 条件渲染指令
- - 4.1.1 v-show
  - 4.1.2 v-if
  - 4.1.3 v-if和v-show的小案例
  - 4.1.4 v-for（key的原理）
- 4.2 列表过滤
- 4.3 列表排序
总结

4. 列表（渲染、排序、过滤）

4.1 条件渲染指令

有个小技巧：

如果是查找对象中不存在的属性，返回的是一个undefined，利用这一个点不管是v-show或者是v-if，如果值等于undefined的就不显示，假设sex属性不存在

<p v-show="student.sex">性别：{{student.sex}}</p>

4.1.1 v-show

v-show的原理：通过display：none 对元素进行隐藏，当满足条件时去除display：none这个样式
适用的场景是：切换频率较高的场景
在使用v-show隐藏元素的时候是可以获取得到元素的，而v-if 是无法获取到元素的

4.1.2 v-if

v-if的原理：将整个节点移除，满足条件时添加节点
v-else、v-else-if 需要配合v-if去使用，但是结构不能被破坏

必须要先写v-if，例如：
```
v-if = "xxx"
v-else = "xxx"
---------------------
v-if = "xxx"
v-else-if = "xxx"
v-else = "xxx"
```
适用的场景：切换频率比较低的场景
template

最大的特点就是不破坏结构但是只能与 v-if 进行配合使用

4.1.3 v-if和v-show的小案例

 <div id="root"><h2>当前n的值为：{{n}}</h2><button @click="n++">点击我n加1</button><div class="box1" v-show = "true">你好啊！我是box1</div> <div class="box1" v-show = "false">你好啊！我是box1</div> <div class="box1" v-show="n === 1">你好啊！box1</div><div class="box2" v-if = "true">我是box2</div><div class="box2" v-if = "false">我是box2</div> <div class="box2" v-if="n === 2">我是box2</div><!-- 3. v-else-if  , v-else , v-if 的区别-  v-if必须先写，才能写v-else和v-else-if-  例如：v-ifv-ifv-if这样是进行3次判断-------------------------------v-ifv-else-ifv-else-ifv-else只要有一个判断为真，下面的语句就不执行----------------------------------v-else只要不满足v-if的条件就执行--><div class="box3" v-if = "n===1">我是box31</div>  <div class="box3" v-else-if="n===1">我是box32</div><div class="box3" v-else-if = "n===3">我是box33</div><div class="box3" v-else>hhhhhhh</div>//当满足条件的时候只输出满足条件的值，例如本例子输出为 ‘我是box31’<!-- 需求：当n == 2时，在页面输出5句话4. template  - 最大的特点就是不破坏结构- 但是只能和 v-if进行配合使用--><template v-if="n === 2"><h3>你好啊！</h3><h3>猜猜我是谁?</h3><h3>我是box4</h3><h3>你猜对了吗?</h3><h3>你真棒！</h3></template></div><script>Vue.config.productionTip = falselet vm = new Vue({el: '#root',data: {n: 0,}})</script>

4.1.4 v-for（key的原理）

特点：

可以遍历数组
可以遍历对象
可以遍历字符串
可以遍历次数（用的很少）
如果我们不写key，默认使用index

作用：用于展示列表的数据

语法：v-for = "(item,index) in xxx" :key= "yyy"

key的原理：（很重要）

虚拟DOM中key的作用：

key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

(1). 旧虚拟DOM中找到了与新虚拟DOM相同的key：

①若虚拟DOM中内容没变, 直接使用之前的真实DOM
②若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM

(2). 旧虚拟DOM中未找到与新虚拟DOM相同的key直接创建新的真实DOM，随后渲染到到页面。
如果使用index作为key会引发以下的问题：

（1）如果发生逆序添加、逆序删除破坏了顺序操作就会产生没有必要的DOM更新而会造成达不到效果的问题

（2）如果输入结构包括了输入类的DOM元素，会产生更新问题比如：input的框的数据对不上等等
所以在开发的过程中key的使用最好是使用唯一能够标识的值作为key，比如id，Date.now(),nanoid这个包npm i nanoid等等

4.2 列表过滤

使用computed

 <div id="root"><input type="text" placeholder="请输入关键字" v-model="keyword"><br><ul><li v-for="value in filtername" :key="value.id" >{{value.name}} -- {{value.age}} -- {{value.gender}}</li></ul></div><script>Vue.config.productionTip = falselet vm = new Vue({el: '#root',data: {arr: [{ id: "001", name: "马冬梅", age: 18, gender: "female" },{ id: "002", name: "周冬雨", age: 55, gender: "female" },{ id: "003", name: "周杰伦", age: 30, gender: "male" },{ id: "004", name: "郭艾伦", age: 30, gender: "male" },{ id: "005", name: "郭德纲", age: 30, gender: "male" },],keyword:""},computed:{filtername:{get(){return this.arr.filter((currentval)=>{return currentval.name.indexOf(this.keyword) !== -1})}}}})</script>

使用watch

<div id="root"><input type="text" placeholder="请输入关键字" v-model="keyword"><br><ul><li v-for="value in filearr" :key="value.id" >{{value.name}} -- {{value.age}} -- {{value.gender}}</li></ul></div><script>/* 分享一个数组去重的方法var arr = [1,35,612,6546,1,51]var newarr = arr.filter((val,index)=>{return arr.indexOf(val,0) === index}) console.log(newarr); filter(function(current,index,arr){return xxx})- return : 写的是过滤的条件- 返回的是满足条件的元素indexOf:- 第一个参数是：要查询的元素- 第二个参数是：开始索引的位置- 它返回的值是当前元素的索引值，如果没有要查询的元素返回的是-1*/Vue.config.productionTip = falselet vm = new Vue({el: '#root',data: {arr: [{ id: "001", name: "马冬梅", age: 18, gender: "female" },{ id: "002", name: "周冬雨", age: 55, gender: "female" },{ id: "003", name: "周杰伦", age: 30, gender: "male" },{ id: "004", name: "郭艾伦", age: 30, gender: "male" },{ id: "005", name: "郭德纲", age: 30, gender: "male" },],keyword:'',filearr:[]},/* 需求：当输入某一个关键字，输出相关的内容 思路：1. 获取到用户输入的数据2. 筛选输入的关键字是否在数据里面*/// 先用watch写watch:{keyword:{immediate:true, handler(newval,oldval){this.filearr = this.arr.filter((currentval)=>{return currentval.name.indexOf(newval) !== -1/*这里有个细节：indexOf去判断 空字符串（不是空格） 时会返回0，所以整个列表都会出来例如："asdf".indexOf("")   返回的是0所以需要向自调用一次使用immediate*/})}}}})</script>

4.3 列表排序

 <div id="root"><h2>人员排序</h2><input type="text" placeholder="请输入关键字" v-model="keyword"><button @click="type = 2">年龄升序</button><button @click="type = 1">年龄降序</button><button @click="type = 0">原顺序</button><ul><li v-for="val in filtername" :key="val.id">{{val.name}} -- {{val.age}} -- {{val.gender}} </li></ul></div><script>Vue.config.productionTip = falselet vm = new Vue({el: '#root',data: {arr: [{ id: "001", name: "马冬梅", age: 18, gender: "female" },{ id: "002", name: "周冬雨", age: 55, gender: "female" },{ id: "003", name: "周杰伦", age: 50, gender: "male" },{ id: "004", name: "郭艾伦", age: 59, gender: "male" },{ id: "005", name: "郭德纲", age: 30, gender: "male" },],keyword:"",type:0},computed:{filtername:{get(){let arr = this.arr.filter((current)=>{return current.name.indexOf(this.keyword) !== -1})arr.sort((a,b)=>{/* a永远在b前面如果返回的值是大于0则交换位置，小于等于0不交换位置return a-b 升序return b-a 降序*/if(this.type){return this.type == 1 ? b.age - a.age : a.age - b.age } })return arr}}}})</script>

总结

以上就是今天要讲的内容，本文介绍了和列表（渲染、排序、过滤）相关的知识，希望对大家有所帮助！

【Vue】第四部分列表（渲染、排序、过滤）相关推荐

Vue.js入门学习--列表渲染--v-for遍历数组生成元素（四）
完整案列demo: <html><head><title>列表渲染--v-for遍历数组生成元素</title><script src=" ...
php 从大到小显示,vue.js,javascript_Vue 在列表渲染的时候，能排序显示么。比如按价格从大到小排序，vue.js,javascript - phpStudy...
Vue 在列表渲染的时候,能排序显示么. 比如按价格从大到小排序 // json { "data": [ { "name": "山鹰登山社" ...
【Vue教程四】条件渲染、列表渲染、数组更新
一.条件渲染:[v-if][v-show] 1.v-if 指令用于条件性地渲染一块内容. 1.1.在元素中使用 v-if 指令: <body><div id="app&qu ...
Vue.js 第二天: 列表渲染
用v-for 把一个数组对应为一组元素我们用 v-for 指令根据一组数组的选项列表进行渲染.v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组并且 it ...
Vue指令篇_v-for_列表渲染
今天要写的是Vue很香的一个指令v-for,这个指令在结构中实现循环,基于数据多次渲染元素,在减少代码量的情况下,又使得逻辑关系一目了然,很奈斯.不多说啦,就开始吧. 目录 1.使用方法 1)v-fo ...
Vue 2 | Part 5 列表渲染和事件监听
之前在vue里面绑定数据,都只是单个地绑定.这期我们来看一下怎样渲染列表,然后通过事件监听方法往列表里面增加item. 列表渲染废话不多说,直接上代码: <div id="app&q ...
2，列表渲染指令v-for以及过滤和排序---vue教程
列表渲染指令过滤 v-for的使用遍历数组和对象遍历数组: <ul><li v-for ="(book,index) in books":key=" ...
Vue核心技术-5,列表渲染指令 v-for
一,前言目前对前期目录进行了简单的梳理,周末会找时间调一下顺序, 顺便再补充一下遗漏的知识点,让过度更加平缓一些, 例如前面没有说计算属性,但目前的列表渲染就要用到了...囧在对目录梳理的过程中,发 ...
Vue的常用指令(v-html {{}}文本插值,v-bind绑定属性,v-if条件渲染,v-for列表渲染,v-on @ 事件绑定,v-model表单绑定)
Vue的常用指令(文本插值,绑定属性,条件渲染,列表渲染,事件绑定,表单绑定) Vue 的介绍 Vue 是一套构建用户界面的渐进式前端框架. 只关注视图层,并且非常容易学习,还可以很方便的与其它库或已 ...
3.Vue.js前端框架：条件判断与列表渲染
3.1 条件判断在视图中,经常需要控制某些DOM元素的显示或隐藏.Vue.js提供了多个指令来实现条件的判断,包括 v-if.v-else.v-else-if.v-show指令.下面分别进行介绍. ...

【Vue】第四部分列表（渲染、排序、过滤）

文章目录

4. 列表（渲染、排序、过滤）

4.1 条件渲染指令

4.1.1 v-show

4.1.2 v-if

4.1.3 v-if和v-show的小案例

4.1.4 v-for（key的原理）

4.2 列表过滤

4.3 列表排序

总结

【Vue】第四部分列表（渲染、排序、过滤）相关推荐

最新文章

热门文章

【Vue】第四部分 列表（渲染、排序、过滤）

文章目录

4. 列表（渲染、排序、过滤）

4.1 条件渲染指令

4.1.1 v-show

4.1.2 v-if

4.1.3 v-if和v-show的小案例

4.1.4 v-for（key的原理）

4.2 列表过滤

4.3 列表排序

总结

【Vue】第四部分 列表（渲染、排序、过滤）相关推荐

最新文章

热门文章

【Vue】第四部分列表（渲染、排序、过滤）

【Vue】第四部分列表（渲染、排序、过滤）相关推荐