Vue的列表之渲染,排序,过滤详解


Posted in Vue.js onFebruary 24, 2022

1. 列表(渲染、排序、过滤)

1.1 条件渲染指令

有个小技巧:

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

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

1.1.1 v-show

1.v-show的原理:通过display:none 对元素进行隐藏,当满足条件时去除display:none这个样式

2.适用的场景是:切换频率较高的场景

3.在使用v-show隐藏元素的时候是可以获取得到元素的,而v-if 是无法获取到元素的

1.1.2 v-if

1.v-if的原理:将整个节点移除,满足条件时添加节点

2.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 进行配合使用

1.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-if
                v-if
                v-if
                这样是进行3次判断
                -------------------------------
                v-if
                v-else-if
                v-else-if
                v-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 = false
        let vm = new Vue({
            el: '#root',
            data: {
                n: 0,
            }
        })
    </script>

1.1.4 v-for(key的原理)

特点:

1.可以遍历数组

2.可以遍历对象

3.可以遍历字符串

4.可以遍历次数(用的很少)

5.如果我们不写key,默认使用index

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

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

key的原理:(很重要)

1.虚拟DOM中key的作用:

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

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

①若虚拟DOM中内容没变, 直接使用之前的真实DOM

②若虚拟DOM中内容变了, 则生成新的真实DOM,随后替换掉页面中之前的真实DOM

(2). 旧虚拟DOM中未找到与新虚拟DOM相同的key直接创建新的真实DOM,随后渲染到到页面。

2.如果使用index作为key会引发以下的问题:

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

(2)如果输入结构包括了输入类的DOM元素,会产生更新问题比如:input的框的数据对不上等等

3.所以在开发的过程中key的使用最好是使用唯一能够标识的值作为key,比如id,Date.now(),nanoid这个包npm i nanoid等等

Vue的列表之渲染,排序,过滤详解

Vue的列表之渲染,排序,过滤详解

1.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 = false
        let 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 = false
        let 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>

1.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 = false
        let 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.js 相关文章推荐
在Vue中使用mockjs代码实例
Nov 25 Vue.js
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
Vue中computed和watch有哪些区别
Dec 19 Vue.js
vue中activated的用法
Jan 03 Vue.js
vue中axios封装使用的完整教程
Mar 03 Vue.js
vue-element-admin项目导入和导出的实现
May 21 Vue.js
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
vue项目打包后路由错误的解决方法
Apr 13 Vue.js
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
Vue3如何理解ref toRef和toRefs的区别
Feb 18 #Vue.js
Vue h函数的使用详解
Feb 18 #Vue.js
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 #Vue.js
前端vue+express实现文件的上传下载示例
一篇文章告诉你如何实现Vue前端分页和后端分页
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 #Vue.js
vue3获取当前路由地址
Feb 18 #Vue.js
You might like
Smarty模板学习笔记之Smarty简介
2014/05/20 PHP
解决ThinkPHP关闭调试模式时报错的问题汇总
2015/04/22 PHP
php mysql_list_dbs()函数用法示例
2017/03/29 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
Prototype使用指南之dom.js
2007/01/10 Javascript
Javascript 继承实现例子
2009/08/12 Javascript
JavaScript 拾碎[三] 使用className属性
2010/10/16 Javascript
强大的jquery插件jqeuryUI做网页对话框效果!简单
2011/04/14 Javascript
jtable列中自定义button示例代码
2013/11/21 Javascript
JQuery实现超链接鼠标提示效果的方法
2015/06/10 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
2017/01/20 Javascript
vuejs事件中心管理组件间的通信详解
2017/08/09 Javascript
js实现图片粘贴上传到服务器并展示的实例
2017/11/08 Javascript
js利用递归与promise 按顺序请求数据的方法
2019/08/30 Javascript
Node.js API详解之 os模块用法实例分析
2020/05/06 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
JavaScript中的执行环境和作用域链
2020/09/04 Javascript
小程序实现列表倒计时功能
2021/01/29 Javascript
python 多进程通信模块的简单实现
2014/02/20 Python
python 队列详解及实例代码
2016/10/18 Python
浅谈Django自定义模板标签template_tags的用处
2017/12/20 Python
Python实现的计算马氏距离算法示例
2018/04/03 Python
Python使用try except处理程序异常的三种常用方法分析
2018/09/05 Python
python绘制多个曲线的折线图
2020/03/23 Python
python 计算积分图和haar特征的实例代码
2019/11/20 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
Django多层嵌套ManyToMany字段ORM操作详解
2020/05/19 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
科尔士百货公司官网:Kohl’s
2016/07/11 全球购物
PUMA澳大利亚官方网站:德国运动品牌
2018/10/19 全球购物
个人租房协议书
2014/04/09 职场文书
党员公开承诺书内容
2014/05/20 职场文书
单位员工收入证明样本
2014/10/09 职场文书
2015年业务员工作总结范文
2015/04/07 职场文书
MySQL 不等于的三种使用及区别
2021/06/03 MySQL
Python 如何将integer转化为罗马数(3999以内)
2021/06/05 Python