Vue学习（三）条件渲染、列表渲染

二狗mao2024-08-06 17:32

条件渲染

v-if

写法：v-if="表达式"（v-else-if="表达式"、v-else）

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

特点：不展示的DOM元素直接被移除。

注意：v-if和v-else-if和v-else一起使用时，结构要紧挨在一起。v-if还可以和template标签一起使用，包含在template标签里面的内容会一起受到template标签的v-if的作用，且不会修改dom的结构。

v-show

写法：v-show="表达式"

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

特点：不展示的dom未被移除，仅仅是使用样式隐藏了，设置了display属性使得其dom不展示。

条件渲染 例：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
    <script type="text/javascript" src="../vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h3 v-show="false">你好，{{name}} </h3><br/>
      <h3 v-show="1 === 2">你好，{{name}} </h3><br/>
      <h3 v-show="false">你好，{{name}} </h3><br/>
      <h3 v-if="false">你好，{{name}} </h3><br/><br/>
      <h2>当前n的值为{{n}}</h2>
      <button @click="n++">点我n加一</button>

      <div v-show="n % 3 == 0">曼波</div>
      <div v-show="n % 3 == 1">哈基米</div>
      <div v-show="n % 3 == 2">阿弥诺斯</div><hr/>

      <div v-if="n % 3 == 0">曼波</div>
      <div v-if="n % 3 == 1">哈基米</div>
      <div v-if="n % 3 == 2">阿弥诺斯</div><hr/>

      <div v-if="n % 3 === 0">曼波</div>
      <div v-else-if="n % 3 === 0">哈基米</div>
      <div v-else>阿弥诺斯</div>

      <template v-if="n % 3 == 1">
        <h2>呵呵呵</h2>
        <h2>wow</h2>
        <h2>哦耶</h2>
      </template>
    </div>
  </body>
  
  <script type="text/javascript">
    new Vue({
      el:'#root',
      data:{
        name:'李二狗',
        n:0
      }
    })
  </script>
</html>

列表渲染

列表渲染使用的语法是v-for="a in A"，其中，a是迭代中的每一代的数据，A是迭代目标（可以是数组、对象，字符串也可以，但是字符串的遍历用的不多，当成一个字符数组就行）

当迭代目标是数组时

此时a代表着数组中的每一个元素，假如数组中的元素是对象，要引用其中的属性，使用{{a.属性}}即可。

除此之外，还要记得标明元素的唯一性标识，使用:key="a.属性（唯一性标识）"

a还可以写作(a,index)，即v-for="(a,index) in A"，此时第一个参数a代表着数组中的每一个元素，第二个参数index代表着数组中元素的下标。所以如果数组中的元素不是对象或者没有唯一性标识，可以使用index作为唯一性标识。

html 复制代码 
  	  <ul>
        <li v-for="person in persons" :key="person.id">
          姓名：{{person.name}}  年龄：{{person.age}}
        </li>
      </ul>

如此页面上就会遍历展示persons中的每个person的相关信息

还可以写作v-for="a in 数字"，意思是遍历几次，a in 5就是遍历五次。用的比较少。

当迭代目标是对象时

此时的a应该写作(value,key)，唯一性标识写key即可，此时的key就是属性名，value就是属性值

html 复制代码 
      <ul>
        <li v-for="(value,key) in cars" :key="key">
          {{key}}是{{value}}
        </li>
      </ul>

案例：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
    <script type="text/javascript" src="../vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h3>你好，{{name}} </h3><br/>
      <!-- 遍历数组 -->
      <ul>
        <li v-for="person in persons" :key="person.id">
          姓名：{{person.name}}  年龄：{{person.age}}
        </li>
      </ul>
      <hr/>
      <!-- index是元素在数组中的索引 -->
      <ul>
        <li v-for="(person,index) in persons" :key="person.id">
          姓名：{{person.name}}  --年龄：{{person.age}} --index: {{index}}
        </li>
      </ul>
      <!-- 对象 -->
      <ul>
        <li v-for="(value,key) in cars" :key="key">
          {{key}}是{{value}}
        </li>
      </ul>
    </div>
  </body>
  
  <script type="text/javascript">
    new Vue({
      el:'#root',
      data:{
        name:'李二狗',
        persons:[
          {id:'001',name:'张三',age:18},
          {id:'002',name:'李四',age:19},
          {id:'003',name:'王五',age:20}
        ],
        cars:{
          name:'比亚迪',
          price:20000,
          color:'black'
        }
      }
    })
  </script>
</html>

key的作用：key是虚拟DOM对象的标识，当状态中的数据发生变化时，vue会根据新的数据生产新的虚拟DOM，随后vue会将新的虚拟DOM和旧的虚拟DOM进行比较，当key相同以及其中内容相同时才会直接使用之前的虚拟DOM。如此才不会出现错误的DOM更新。并且使用key时，能在插入数据时，不会出现多条数据的虚拟DOM更新，效率更高。

列表过滤

监视属性实现

没有新的知识点，直接见案例

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
    <script type="text/javascript" src="../vue.js"></script>
  </head>
  <body>
    <div id="root">
      <input type="text" placeholder="请输入名字" v-model="keyWords">
      <ul>
        <li v-for="person in Fpersons" :key="person.id">
          --姓名：{{person.name}} --年龄：{{person.age}} --性别：{{person.gender}}
        </li>
      </ul>
      <hr/>
    </div>
  </body>
  
  <script type="text/javascript">
    new Vue({
      el:'#root',
      data:{
        name:'李二狗',
        keyWords:'',
        persons:[
          {id:'001',name:'亚托克斯',age:18,gender:'男'},
          {id:'002',name:'维鲁斯',age:19,gender:'男'},
          {id:'003',name:'希维尔',age:20,gender:'女'},
          {id:'004',name:'伊泽瑞尔',age:21,gender:'男'}
        ],
        Fpersons:[]
      },
      watch:{
        keyWords:{
          immediate:true,
          handler(newValue){
            this.Fpersons=this.persons.filter((p)=>{
              return p.name.indexOf(newValue) !== -1
            })
          }
        }
      }
    })
  </script>
</html>

计算属性实现

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
    <script type="text/javascript" src="../vue.js"></script>
  </head>
  <body>
    <div id="root">
      <input type="text" placeholder="请输入名字" v-model="keyWords">
      <ul>
        <li v-for="person in Fpersons" :key="person.id">
          --姓名：{{person.name}} --年龄：{{person.age}} --性别：{{person.gender}}
        </li>
      </ul>
      <hr/>
    </div>
  </body>
  
  <script type="text/javascript">
    new Vue({
      el:'#root',
      data:{
        name:'李二狗',
        keyWords:'',
        persons:[
          {id:'001',name:'亚托克斯',age:18,gender:'男'},
          {id:'002',name:'维鲁斯',age:19,gender:'男'},
          {id:'003',name:'希维尔',age:20,gender:'女'},
          {id:'004',name:'伊泽瑞尔',age:21,gender:'男'}
        ]
      },
      computed:{
        Fpersons(){
          return this.persons.filter((p)=>{
              return p.name.indexOf(this.keyWords) !== -1
            })
        }
      }
    })
  </script>
</html>

可以看出，此时计算属性实现更为方便

列表排序

在计算属性的逻辑中加上排序的逻辑即可

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
    <script type="text/javascript" src="../vue.js"></script>
  </head>
  <body>
    <div id="root">
      <input type="text" placeholder="请输入名字" v-model="keyWords">
      <ul>
        <li v-for="person in Fpersons" :key="person.id">
          --姓名：{{person.name}} --年龄：{{person.age}} --性别：{{person.gender}}
        </li>
      </ul>
      <button @click="order = 0">原顺序</button>
      <button @click="order = 1">降序</button>
      <button @click="order = 2">升序</button>
      <hr/>
    </div>
  </body>
  
  <script type="text/javascript">
    new Vue({
      el:'#root',
      data:{
        name:'李二狗',
        keyWords:'',
        order:0, //排序方式，0原顺序，1降序，2升序
        persons:[
          {id:'001',name:'亚托克斯',age:18,gender:'男'},
          {id:'002',name:'维鲁斯',age:17,gender:'男'},
          {id:'003',name:'希维尔',age:22,gender:'女'},
          {id:'004',name:'伊泽瑞尔',age:21,gender:'男'}
        ]
      },
      computed:{
        Fpersons(){
          const arr = this.persons.filter((p)=>{
            return p.name.indexOf(this.keyWords) !== -1
          })
          //判断是否需要排序
          if(this.order != 0){
            arr.sort((p1,p2)=>{
              if(this.order == 1){
                return p2.age - p1.age
              }else if(this.order == 2){
                return p1.age - p2.age
              }
            })
          }
          return arr
        }
      }
    })
  </script>
</html>
相关推荐
JerryXZR5 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香7 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969310 分钟前
前端预览word、excel、ppt
前端·word·excel
数据与后端架构提升之路12 分钟前
从神经元到神经网络：深度学习的进化之旅
人工智能·神经网络·学习
小华同学ai15 分钟前
wflow-web：开源啦 ，高仿钉钉、飞书、企业微信的审批流程设计器，轻松打造属于你的工作流设计器
前端·钉钉·飞书
一行122 分钟前
电脑蓝屏debug学习
学习·电脑
Gavin_91524 分钟前
【JavaScript】模块化开发
前端·javascript·vue.js
星LZX35 分钟前
WireShark入门学习笔记
笔记·学习·wireshark
阑梦清川36 分钟前
在鱼皮的模拟面试里面学习有感
学习·面试·职场和发展
qq_4330994036 分钟前
Isaac Gym学习笔记——概述
学习
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10红米手机使用google play