• 条件渲染（v-if、v-show）、列表渲染（v-for）、列表中key的原理和作用、列表过滤（filter）、列表排序（sort）

    目录

    一、条件渲染

        1.v-if

        2.v-show

         3.template

    二、列表渲染

        1.v-for

            遍历数组

          遍历对象

    遍历字符串

    遍历指定次数

    三、v-for中key作用和原理

    情景

     改正

    总结key

        1.虚拟DOM中key的作用

         2.对比规则

        3.用index作为key可能引发的问题

         4.开发中如何选择key？

    四、列表过滤

      1.watch案例

      2.computed案例

    五、列表排序

    一、条件渲染

        当符合某个条件后，我们就选用某种样式

        1.v-if

            适用于：切换频率较低的场景

            特点：不展示的DOM元素直接被移除，在页面源码中无法看到

            注意：v-if，v-else-if 、  else if，div要紧紧的挨在一起，不能打断 -

    1.             
    2.             
    3.             <div v-if="n===1" >Angulardiv>
    4.             <div v-else-if="n===2" >Reactdiv>
    5.             <div v-else-if="n===3" >Vuediv>
    6.             <div v-else >6666666div>

          

    2.             <h2 v-if="false">欢迎来到{{name}}学习h2>

        2.v-show

                写法：v-show=“表达式”

                适用于：切换频率较高的场景

                特点：不展示DOM元素未被移除，仅仅是使用上市隐藏掉

                备注：使用v-if时，元素可能无法获取到，而使用v-show一定可以获取到

    1.             
    2.             <h2 v-show="false">欢迎来到{{name}}学习h2>

       

         3.template

            当我们对某几个标签添加相同的样式的时候，我们就可以使用template标签，在标签上添加v-if属性

             好处：不影响整体样式。

             备注：template标签不影响整体结构，只是把下面这三个标签给包裹起来，在页面查看源码的时候也不会发现template标签

           此标签只能使用v-if，不能使用v-show

    1.              
    2.              <template v-if="n===1">
    3.                 <h2>你好h2>
    4.                 <h2>中国h2>
    5.                 <h2>北京h2>
    6.              template>

    二、列表渲染

        1.v-for

       用于展示列表数据

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

        可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少） 

            遍历数组

             v-for类似java中foreach遍历,persons里面有几个值，我们在页面就会呈现几个

             :key="p.id"让每一个li都有一个唯一的标识，类似数据库中的主键

           {{p}}  这么输出的话，会把数据直接输出，我们一般不这样

    1.                 <li v-for="p in persons" :key="p.id">
    2.                     
    3.                     {{p.name}}-{{p.age}}
    4.                 li>

                     index就是索引值，这个地方会有索引值,类似数组的下标
                    :key="p.id"  这个地方不用p.id也可以，我们使用index ，因为index也是唯一的，类似数组下标
                    :key这个标签特别重要,动态绑定数据

    1.             <ul>
    2.  
    3.                 <li v-for="(p,index) in persons" :key="index">
    4.                     
    5.                     {{p.name}}-{{p.age}}-{{index}}
    6.                 li>
    7.             ul>

                         如果要有顺序的话，就需要数组来存储
                         这里的id类似数据库中的主键

    1.                 data:{
    2.  
    3.                   persons:[
    4.                     {id:'001',name:'张三',age:18},
    5.                     {id:'002',name:'李四',age:18},
    6.                     {id:'003',name:'王五',age:20}
    7.                   ]
    8.                 },

          遍历对象

         这里的对象直接就是value，不用和数组一样调用了

    1.  
    2.             <h2>汽车信息h2>
    3.             <ul>
    4.  
    5.                 <li v-for="(value,k) in car" :key="k" >
    6.                    
    7.                     {{value}}-{{k}}
    8.                 li>
    9.             ul>
    1.                 data:{
    2.  
    3.                   car:{
    4.                     name:'奥迪A8',
    5.                     price:"666666",
    6.                     color:'黑色'
    7.                   }
    8.                 },

    遍历字符串

    1.             <ul>
    2.                 <li v-for="(value,k) in str" :key="k" >
    3.             
    4.                     {{value}}-{{k}}
    5.                 li>
    6.             ul>
    1.    data:{
    2.                     str:'hello'
    3.      }

    遍历指定次数

    1.        <ul>
    2.                 <li v-for="(number,index) in 5" :key="index" >
    3.             
    4.                     {{number}}-{{index}}
    5.                 li>
    6.             ul>

    三、v-for中key作用和原理

        如果在写代码时并没有指定：key，我们会把index默认的作为key

       通过我们查看发现，我们在源代码中是有:key的，但是在网页上并不会显示，原因就是这个：key是vue内部在用，用完就干掉了

    情景

    如下，当我们下边代码  ：key的值是index的时候，会出现一系列的问题（不同的情景不一样，可能index不会出问题）

    1.             <h2>人员列表h2>
    2.             <button @click="add">添加一个老刘button>
    3.             <ul>
    4.  
    5.                 <li v-for="(p,index) in persons" :key="index">
    6.                     
    7.                     {{p.name}}-{{p.age}}-{{index}}
    8.                     <input type="text">
    9.                 li>
    10.             ul>

     

    当我们在输入框中输入好内容，点击“添加一个老刘”，就会出现下列情况，文本框不会随着人名流动

     改正

     我们修改一下代码  :key="p.id",我们再运行一下程序就不会发生这种情况（正常运行）

    1.             <h2>人员列表h2>
    2.             <button @click="add">添加一个老刘button>
    3.             <ul>
    4.                 
    5.                 、
    6.                 
    7.                 <li v-for="(p,index) in persons" :key="p.id">
    8.                     
    9.                     {{p.name}}-{{p.age}}-{{index}}
    10.                     <input type="text">
    11.                 li>
    12.             ul>

    总结key

        1.虚拟DOM中key的作用

               key是虚拟对象的标识，当数据发生变化时，Vue会根据新数据生成新的虚拟DOM，随后Vue进行新虚拟DOM与旧虚拟DOM的差异比较。

         2.对比规则

            ①旧虚拟DOM找到了与新虚拟DOM相同的key：

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

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

            ②旧虚拟DOM中未找到与新虚拟DOM中相同的key

                 创建新的真实DOM，随后渲染到页面

        3.用index作为key可能引发的问题

             ①若对数据进行逆序添加、逆序删除等破坏顺序操作：

                 会产生没有必要的真实DOM更新==》界面效果没问题，但效率低

             ②如果结构中还包含输入类DOM：

                 会产生错误DOM更新==》界面有问题

         4.开发中如何选择key？

             ①最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等（类似数据库中主键）

             ②如果不存在对数据的逆序添加、逆序删除等破坏顺序的操作，仅用于渲染列表用于展示，使用index作为key是没有问题的

      

    四、列表过滤

      1.watch案例

        使用watch监视keyWords

     初始界面：

    当我们随便在框内输入时，下面就会显示我们想要查找的内容

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <title> 初识vuetitle>
    6.         
    7.         <script type="text/javascript" src="../js/vue.js">script> 
    8.     head>
    9.     <body>
    10.         <div id="root">
    11.             <ul>
    12.                 <h2>人员列表h2>
    13.                 
    14.                 <input type="text" placeholder="请输入名字"  v-model="keyWords">
    15.                 <li v-for="(p,index) in  filPersons" :key="p.id" >
    16.                     {{p.name}}-{{p.age}}-{{p.sex}}
    17.                 li>
    18.             ul>
    19.  
    20.         div>
    21.  
    22.         <script type="text/javascript">
    23.             //阻止vue在启动时生成生产提示
    24.             Vue.config.productionTip=false
    25.             
    26.             new Vue({
    27.                 el:'#root',
    28.                 data:{
    29.                   keyWords:'',
    30.                   persons:[
    31.                     {id:'001',name:'马冬梅',age:19,sex:'女'},
    32.                     {id:'002',name:'周冬雨',age:20,sex:'女'},
    33.                     {id:'003',name:'周杰伦',age:21,sex:'男'},
    34.                     {id:'004',name:'温兆伦',age:22,sex:'男'}
    35.                   ],
    36.                   filPersons:[]
    37.                 },
    38.                 watch:{
    39.                     // 监视谁我们就写谁
    40.                    keyWords:{
    41.                     // 初始化时让handler调用一下，如果不调用的话，初始页面会没有内容
    42.                     // 前提条件：所有的字符串.indexOf("")空字符串，返回值都是0
    43.                      immediate:true,
    44.                      handler(newValue,oldValue){
    45.                         // 过滤
    46.                         // filter规律之后，并不会影响我们初始的数组，而是生成一个全新的数组
    47.                         //  我们不能更改直接赋值到原数组，否则会导致我们查询的内容越来越少，最后甚至没有了
    48.                         this. filPersons= this.persons.filter((p)=>{
    49.                             // 函数体
    50.                             // return 后面加的语句使我们要的数据
    51.                             // indexOf 方法，当含有括号内的字符串的时候，会返回下标是第几位（从零开始算
    52.                             //              当不包含的时候，就会返回-1
    53.                             return p.name.indexOf(newValue) !==-1
    54.                         })
    55.                      }
    56.                    }
    57.                 },
    58.                 methods:{
    59.  
    60.                 }
    61.             })
    62.  
    63.         script>   
    64.     body>
    65. html>

      2.computed案例

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <title> 初识vuetitle>
    6.         
    7.         <script type="text/javascript" src="../js/vue.js">script> 
    8.     head>
    9.     <body>
    10.         <div id="root">
    11.             <ul>
    12.                 <h2>人员列表h2>
    13.                 
    14.                 <input type="text" placeholder="请输入名字"  v-model="keyWords">
    15.                 <li v-for="(p,index) in  filPersons" :key="p.id" >
    16.                     {{p.name}}-{{p.age}}-{{p.sex}}
    17.                 li>
    18.             ul>
    19.  
    20.         div>
    21.  
    22.         <script type="text/javascript">
    23.             //阻止vue在启动时生成生产提示
    24.             Vue.config.productionTip=false
    25.             
    26.           const vm=  new Vue({
    27.                 el:'#root',
    28.                 data:{
    29.                   keyWords:'',
    30.                   persons:[
    31.                     {id:'001',name:'马冬梅',age:19,sex:'女'},
    32.                     {id:'002',name:'周冬雨',age:20,sex:'女'},
    33.                     {id:'003',name:'周杰伦',age:21,sex:'男'},
    34.                     {id:'004',name:'温兆伦',age:22,sex:'男'}
    35.                   ],
    36.                  
    37.                 },
    38.  
    39.                 computed:{
    40.                     // 这个形式是缩写，当getter函数使用
    41.                     // 初次读取的时候会调用一下，当依赖的数据发生变化时也会调用一下
    42.                     filPersons(){
    43.                         // 这个return是计算属性规定的
    44.                         return this.persons.filter((p)=>{
    45.                             // 这个return是filter规定的
    46.                             return p.name.indexOf(this.keyWords) !==-1
    47.                         })
    48.                     }
    49.                 }
    50.             })
    51.  
    52.         script>   
    53.     body>
    54. html>

    效果相同

    五、列表排序

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <title> 初识vuetitle>
    6.         
    7.         <script type="text/javascript" src="../js/vue.js">script> 
    8.     head>
    9.     <body>
    10.         <div id="root">
    11.             <h2>人员列表h2>
    12.             
    13.             <input type="text" placeholder="请输入名字"  v-model="keyWords">
    14.             <button @click="sortType=2" >年龄升序button>
    15.             <button @click="sortType=1" >年龄降序button>
    16.             <button @click="sortType=0" >原顺序button>
    17.  
    18.             <ul>
    19.                 <li v-for="(p,index) in  filPersons" :key="p.id" >
    20.                     {{p.name}}-{{p.age}}-{{p.sex}}
    21.                 li>
    22.             ul>
    23.  
    24.         div>
    25.  
    26.         <script type="text/javascript">
    27.             //阻止vue在启动时生成生产提示
    28.             Vue.config.productionTip=false
    29.             
    30.           const vm=  new Vue({
    31.                 el:'#root',
    32.                 data:{
    33.                   keyWords:'',
    34.                 //   0原顺序 1降序 2升序
    35.                   sortType:0,  
    36.                   persons:[
    37.                     {id:'001',name:'马冬梅',age:19,sex:'女'},
    38.                     {id:'002',name:'周冬雨',age:20,sex:'女'},
    39.                     {id:'003',name:'周杰伦',age:21,sex:'男'},
    40.                     {id:'004',name:'温兆伦',age:22,sex:'男'}
    41.                   ],
    42.                  
    43.                 },
    44.  
    45.                 computed:{
    46.                     // 这个形式是缩写，当getter函数使用
    47.                     // 初次读取的时候会调用一下，当依赖的数据发生变化时也会调用一下
    48.                     filPersons(){
    49.                         // 我们把这个地方的return取消，不着急return
    50.                        const arr= this.persons.filter((p)=>{
    51.                             // 这个return是filter规定的
    52.                             
    53.                             return p.name.indexOf(this.keyWords) !==-1
    54.                         })
    55.  
    56.                         if(this.sortType){
    57.                             // 运行到这里说明不是0
    58.                             arr.sort( (p1,p2)=>{
    59.                                 // 三目运算
    60.                                 return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
    61.                             })
    62.                         }
    63.                         //当 this.sortType===0时，会直接跳过if来到这里（原始数据不会改变，所以就是原顺序
    64.                         return arr
    65.                     }
    66.                 }
    67.             })
    68.  
    69.         script>   
    70.     body>
    71. html>

    原顺序：

     升序：

     降序

  • 相关阅读:
    软件开发项目文档系列之十二如何撰写用户培训方案
    【虹科EMC测试系列】EMC测试中放大器的线性度验证
    【人因工程】认知行为可靠性评价浅谈
    PostgreSQL 同步复制原理解析
    【RHCE】作业：DNS主从同步&防火墙iptables服务使用
    计算机毕业设计Java的音乐网站管理系统(源码+系统+mysql数据库+lw文档)
    2023系统架构师---论软件系统架构评估（范文）
    2023 “华为杯” 中国研究生数学建模竞赛（C题）深度剖析|数学建模完整代码+建模过程全解全析
    Eureka注册中心
    基于PHP+html的学生课外活动成果统计系统
  • 原文地址：https://blog.csdn.net/weixin_51351637/article/details/126643492