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>
相关推荐
徐小夕6 小时前
我用 AI 撸了个开源"万能预览器"：浏览器直接打开 Office、CAD 和 3D 模型
前端·vue.js·github
小码哥_常6 小时前
Flutter Android 延迟加载代码指南：提升应用性能的关键
前端
yangyanping201087 小时前
Go语言学习之对象关系映射GORM
jvm·学习·golang
这是个栗子7 小时前
TypeScript（三）
前端·javascript·typescript·react
网络工程小王7 小时前
【Transformer架构详解】（学习笔记）
笔记·学习
kvo7f2JTy7 小时前
基于机器学习算法的web入侵检测系统设计与实现
前端·算法·机器学习
北风toto7 小时前
前端CSS样式详细笔记
前端·css·笔记
nanfeiyan7 小时前
git commit
前端
倒酒小生9 小时前
今日算法学习小结
学习
醇氧9 小时前
【学习】【说人话版】子网划分
学习
热门推荐
01GitHub 镜像站点02OpenClaw 请求超时 llm request timed out 怎么解决？3 种方案实测，附完整排查流程03Qwen3.5-Omni与Qwen3.6模型全面解析（含测评/案例/使用教程）04AI 编程效率翻倍：Superpowers Skills 上手清单 + 完整指南05VMware Workstation Pro 17 虚拟机完整安装教程（2026最新）06Claude Code 未登录 使用第三方模型07Oh My Codex 快速使用指南08最新更新版本，OpenClaw v2026.4.2 深度解读剖析：Task Flow 重磅回归与安全架构的全面硬化09UV安装并设置国内源10【技术干货】Gemma 4 上手深度指南：本地多模态大模型的新基线