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

最新推荐文章于 2024-08-06 17:23:10 发布
最新推荐文章于 2024-08-06 17:23:10 发布
阅读量490 收藏 7
点赞数 4
分类专栏： Vue的学习 文章标签： vue.js 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2302_79468488/article/details/140907354
版权

条件渲染

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不展示。

条件渲染 例：

<!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作为唯一性标识。

  	  <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就是属性值

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

案例：

<!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更新，效率更高。

列表过滤

监视属性实现

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

<!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>

计算属性实现

<!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>

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

列表排序

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

<!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>

二狗mao
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
深入理解Vue 的条件渲染和列表渲染
08-29
深入理解Vue的条件渲染和列表渲染 Vue.js 作为一个流行的前端框架，掌握它的渲染机制是非常重要的。在本篇文章中，我们将深入了解 Vue 的条件渲染和列表渲染。 条件渲染 条件渲染是 Vue.js 中的一种核心机制，...
Vue 监听列表item渲染事件方法
10-18
在Vue.js中，当我们需要在列表渲染过程中监听每个项（item）的渲染事件时，官方API并没有提供直接的方法。然而，Vue的灵活性允许我们通过一些技巧来实现这一目标。本篇将详细介绍如何利用Vue的过滤器（filter）功能...
06 VUE学习：条件渲染和列表渲染
热门推荐
百锦再的博客
05-17 9万+
Vue 实现了一些巧妙的方法来最大化对 DOM 元素的重用，因此用另一个包含部分重叠对象的数组来做替换，仍会是一种非常高效的操作。当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。为了给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的。是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。来遍历一个对象的所有属性。
前端之vue条件渲染、列表渲染
weixin_46372074的博客
04-25 1344
vue条件渲染、列表渲染条件渲染列表渲染v-for遍历数组keykey的选择v-for遍历对象遍历字符串遍历指定次数列表过滤列表排序 条件渲染 v-if 值为false，v-if在的标签直接在HTML文档中删除； v-show值为false，v-show在的标签display的值为none。 v-if=“表达式” // 表达式就是会返回一个值，此处要能转换为Boolean值。 template标签最大的好处是不影响文档的结构，渲染时会将template标签去掉 template只能和v-if配合使用
vue当中的条件渲染和列表渲染
m0_68997646的博客
10-28 1061
vue当中的条件渲染和列表渲染
vue条件渲染和列表渲染
过客如期的博客
05-20 1096
一，条件渲染：v-if和v-show 1.v-if : vue提供了v-if指令，可以根据条件判断元素渲染与否。 2.v-if接受一个具有truth值的表达式，当为true时元素渲染，反之元素不渲染。 3.相应的还有v-else和v-else-if，当v-if为false时，渲染v-else内容。 4.注意，v-else必须和和v-if相邻，否则识别不了。 5.v-show : vue提供了另一个指令v-show也可以用来动态渲染元素。 6.v-if会销毁元素，代驾比较大，v-show只是在css的disp
Vue3学习系列之《列表渲染》
云上道人的博客
09-30 1600
Vue的列表渲染指令：v-for
html可以用vue渲染吗,vue条件渲染和列表渲染
weixin_33929779的博客
06-16 964
在vue中我们可以使用v-if语句进行条件渲染，用v-for指令根据一组数组的选项列表进行渲染。本文就来为大家详细介绍一下vue中的条件渲染和列表渲染。一、条件渲染1、v-if语句hahahah如果seen为true，则显示，如果seen为false，则不显示2、v-if和v-else语句123456如果seen为true，则显示123，如果seen不为真，则显示4563、v-if、v-else-...
Vue条件判断与列表渲染
qq_46149597的博客
11-03 1570
Vue条件判断与列表渲染
Vue列表渲染
qq_45954420的博客
03-06 4384
一、Vue列表渲染 1.用 v-for 把一个数组对应为一组元素 我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。 <ul id="example-1"> <li v-for="item in items" :key="item.message"> {{ item.message }} </li>
[Vue]列表渲染
emmmm.....
10-09 2559
1. 列表渲染 1.1 v-for 1.2 v-for 中的索引 2. v-for 遍历数组 3. v-for 遍历对象 4. v-for 遍历字符串 5. v-for 遍历指定次数 6. key的作用与原理 6.1 key 6.2 key错误演示 6.2.1 index作为key 6.2.2 不写key 6.2.3 出现错误的解释 6.3 可以对数组数据进行唯一标识的作为key 6.3.1 示例 6.3.2 解释 6.4 key的作用 6.5 用index作为key可能会引发的问题 6.6 开发中如何选择
Vue调用后台接口渲染列表
m0_48607837的博客
06-08 4567
下载Axios 在min.js中引入 拿到接口先封装一下api—>新建文件夹—>后缀名.js文件 暴露接口名称,在那个页面调用接口就在哪个页面引入 用element ui 里面的el-table和el-table-column这两个组件 在data中定义一个存放列表数据的空数组 在el-table中动态绑定一下 在methods中定义一个方法,调用接口,打印一下数据 listPage是封装好的接口暴露出来的名称 赋值完成以后,看一下需要展示那些数据,el-table-column中用p
Vue列表页渲染优化详解
08-29
Vue.js通过其响应式系统自动追踪数据变化，但这可能导致不必要的DOM更新，尤其是在渲染列表时。以下是一些针对Vue列表页渲染的优化策略： 1. **使用`Object.freeze()`**： 当数据对象不会改变时，可以使用`Object....
Vue列表渲染的示例代码
10-17
本文将详细介绍如何在Vue中使用`v-for`指令进行列表渲染，并探讨相关注意事项。 `v-for`指令允许我们将数组中的每一项映射到一个组件元素。基本语法是`v-for="item in items"`，其中`items`是包含要渲染数据的数组...
JAVA毕业设计|ssm基于java的健身房管理系统的设计与实现vue包含文档代码讲解
2401_86480677的博客
08-03 326
前面提到的系统分析，系统设计最主要还是进行功能，系统操作逻辑的设计，也包括了存储数据的数据库方面的设计等内容，系统实现就是一个最终的实施阶段，将前面的设计成果进行物理转化，最终出具可以运用于实际的软件系统。如图5.4显示的就是健身器材列表页面，此页面提供给管理员的功能有：对全部的健身器材的一个管理、可以根据健身器材名称进行模糊查询、根据时间区间来进行判断器材的是否损坏。如图5.1显示的就是会员管理页面，此页面提供给管理员的功能有：对会员信息的一个管理，不同会员看到的页面是不一样的，会员信息也是不同的.
Vue常见问题（一）组件的使用
最新发布
GLimerence的博客
08-06 311
内容解释：组件未定义，请确保你的组件已经定义了，另外可以理解成错误使用。报错的内容大致意思是：组件错误使用或者失效。
VUE实现TAB切换不同页面
weixin_43159039的博客
08-02 639
SignList这三个页面就是需要切换的页面。
Vue的所有面试题
qq_61132537的博客
08-06 405
在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。data 和 methods都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作。当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步。执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的。页面显示的数据和data中的数据已经保持同步了，都是最新的。
vue中openlayers过滤高亮显示某个图层
qq_61950936的博客
08-06 289
【代码】vue中openlayers过滤高亮显示某个图层。openlayers库没有直接支持这样设置，所以可以使用库：**ol-ext**，地址：[https://viglino.github.io/ol-ext/examples/filter/map.filter.crop.html](https://viglino.github.io/ol-ext/examples/filter/map.filter.crop.html)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

二狗mao

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值