Vue模板语法（二）

于 2023-01-17 14:00:49 发布
阅读量2.8k 收藏 1
点赞数 2
CC 4.0 BY-SA版权
分类专栏： Vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52851967/article/details/128708085
本文详细介绍了Vue中的条件渲染指令v-if、v-else、v-else-if和v-show的使用，以及模板元素template的作用。此外，还探讨了v-for循环指令的基本用法、支持的遍历类型和数组更新检测。最后，讨论了在v-for中使用key属性的重要性，以及无key和有key时虚拟DOM的diff算法差异，强调了key在优化列表渲染效率中的角色。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Vue条件语句 

1、v-if、v-else、v-else-if

v-if、v-else、v-else-if用于根据条件来渲染某一块的内容： 

  • 这些内容只有在条件为true时，才会被渲染出来；
  • 这三个指令与JavaScript的条件语句if、else、else if类似；

v-if的渲染原理：

  • v-if是惰性的；
  • 当条件为false时，其判断的内容完全不会被渲染或者会被销毁掉；
  • 当条件为true时，才会真正渲染条件块中的内容；

v-if

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="app">
    <!-- v-if="条件" -->
    <div class="info" v-if="Object.keys(info).length">
      <h2>个人信息</h2>
      <ul>
        <li>姓名: {{info.name}}</li>
        <li>年龄: {{info.age}}</li>
      </ul>
    </div>
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data() {
        return {
          info: {}
        }
      }
    })

    // 2.挂载app
    app.mount("#app")
  </script>
</body>
</html>

v-else

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="app">
    <!-- v-if="条件" -->
    <div class="info" v-if="Object.keys(info).length">
      <h2>个人信息</h2>
      <ul>
        <li>姓名: {{info.name}}</li>
        <li>年龄: {{info.age}}</li>
      </ul>
    </div>

    <!-- v-else -->
    <div v-else>
      <h2>没有输入个人信息</h2>
      <p>请输入个人信息后, 再进行展示~</p>
    </div>
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data() {
        return {
          info: {}
        }
      }
    })

    // 2.挂载app
    app.mount("#app")
  </script>
</body>
</html>

v-else-if

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
        <h1 v-if="score > 90">优秀</h1>
        <h2 v-else-if="score > 80">良好</h2>
        <h3 v-else-if="score >= 60">及格</h3>
        <h4 v-else>不及格</h4>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
        // 1.创建app
        const app = Vue.createApp({
            // data: option api
            data() {
                return {
                    score: 40
                }
            },
        })

        // 2.挂载app
        app.mount("#app")
    </script>
</body>
</html>

2、template元素

因为v-if是一个指令，所以必须将其添加到一个元素上：

  • 但是如果我们希望切换的是多个元素呢？
  • 此时我们渲染div，但是我们并不希望div这种元素被渲染；
  • 这个时候，我们可以选择使用template；

template元素可以当做不可见的包裹元素，并且在v-if上使用，但是最终template不会被渲染出来：

有点类似于小程序中的block

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
        <!-- v-if="条件" -->
        <!-- 这个template元素，不会被渲染到html页面中 -->
        <template v-if="Object.keys(info).length">
            <h2>个人信息</h2>
            <ul>
                <li>姓名: {{info.name}}</li>
                <li>年龄: {{info.age}}</li>
            </ul>
        </template>

        <!-- v-else -->
        <template v-else>
            <h2>没有输入个人信息</h2>
            <p>请输入个人信息后, 再进行展示~</p>
        </template>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
        // 1.创建app
        const app = Vue.createApp({
            // data: option api
            data() {
                return {
                    info: {name: "why", age: 18}
                }
            }
        })

        // 2.挂载app
        app.mount("#app")
    </script>
</body>
</html>

3、v-show

v-show和v-if的用法看起来是一致的，也是根据一个条件决定是否显示元素或者组件：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>

    <div id="app">
        <div>
            <button @click="toggle">切换</button>
        </div>

        <div v-show="isShowCode">
            <img src="https://game.gtimg.cn/images/yxzj/web201706/images/comm/floatwindow/wzry_qrcode.jpg" alt="">
        </div>

        <div v-if="isShowCode">
            <img src="https://game.gtimg.cn/images/yxzj/web201706/images/comm/floatwindow/wzry_qrcode.jpg" alt="">
        </div>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
        // 1.创建app
        const app = Vue.createApp({
            // data: option api
            data() {
                return {
                    isShowCode: true
                }
            },

            methods: {
                toggle() {
                    this.isShowCode = !this.isShowCode
                }
            }
        })

        // 2.挂载app
        app.mount("#app")
    </script>
</body>
</html>

v-show和v-if的区别

首先，在用法上的区别：

  • v-show是不支持template；
  • v-show不可以和v-else一起使用；

其次，本质的区别：

  • v-show元素无论是否需要显示到浏览器上，它的DOM实际都是有存在的，只是通过CSS的display属性来进行切换；
  • v-if当条件为false时，其对应的原生压根不会被渲染到DOM中；

开发中如何进行选择呢？

  • 如果我们的原生需要在显示和隐藏之间频繁的切换，那么使用v-show；
  • 如果不会频繁的发生切换，那么使用v-if；

v-for

1、v-for基本使用

v-for的基本格式是 "item in 数组"：

  • 数组通常是来自data或者prop，也可以是其他方式；
  • item是我们给每项元素起的一个别名，这个别名可以自定来定义；

我们知道，在遍历一个数组的时候会经常需要拿到数组的索引：

  • 如果我们需要索引，可以使用格式： "(item, index) in 数组"；
  • 注意上面的顺序：数组元素项item是在前面的，索引项index是在后面的；
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .item {
      margin-top: 5px;
      background-color: orange;
    }

    .item .title {
      color: red;
    }
  </style>
</head>
<body>

  <div id="app">
    <!-- 1.电影列表进行渲染 -->
    <h2>电影列表</h2>
    <ul>
      <li v-for="movie in movies">{{ movie }}</li>
    </ul>

    <!-- 2.电影列表同时有索引 -->
    <ul>
      <li v-for="(movie, index) in movies">{{index + 1}} - {{ movie }}</li>
    </ul>

    <!-- 3.遍历数组复杂数据 -->
    <h2>商品列表</h2>
    <div class="item" v-for="item in products">
      <h3 class="title">商品: {{item.name}}</h3>
      <span>价格: {{item.price}}</span>
      <p>秒杀: {{item.desc}}</p>
    </div>
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data() {
        return {
          // 1.movies
          movies: ["星际穿越", "少年派", "大话西游", "哆啦A梦"],

          // 2.数组: 存放的是对象
          products: [
            { id: 110, name: "Macbook", price: 9.9, desc: "9.9秒杀, 快来抢购!" },
            { id: 111, name: "iPhone", price: 8.8, desc: "9.9秒杀, 快来抢购!" },
            { id: 112, name: "小米电脑", price: 9.9, desc: "9.9秒杀, 快来抢购!" },
          ]
        }
      },
    })

    // 2.挂载app
    app.mount("#app")
  </script>
</body>
</html>

2、v-for支持的类型

v-for也支持遍历对象，并且支持有一二三个参数：

  • 一个参数： "value in object";
  • 二个参数： "(value, key) in object";
  • 三个参数： "(value, key, index) in object";

v-for同时也支持数字的遍历：

  • 每一个item都是一个数字；

v-for也可以遍历其他可迭代对象(Iterable)

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="app">
    <!-- 1.遍历数组 -->

    <!-- 2.遍历对象 -->
    <ul>
      <li v-for="(value, key, index) in info">{{value}}-{{key}}-{{index}}</li>
    </ul>

    <!-- 3.遍历字符串(iterable) -->
    <ul>
      <li v-for="item in message">{{item}}</li>
    </ul>

    <!-- 4.遍历数字（从1开始） -->
    <ul>
      <li v-for="item in 100">{{item}}</li>
    </ul>
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data() {
        return {
          message: "Hello Vue",
          movies: [],
          info: { name: "why", age: 18, height: 1.88 }
        }
      },
    })

    // 2.挂载app
    app.mount("#app")
  </script>
</body>
</html>

3、template元素

类似于v-if，你可以使用 template 元素来循环渲染一段包含多个元素的内容：

我们使用template来对多个元素进行包裹，而不是使用div来完成；

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
        <!-- 如果div没有实际的意义, 那么可以使用template替换 -->
        <div v-for="(value, key, index) in infos">
            <span>{{value}}</span>
            <strong>{{key}}</strong>
            <i>{{index}}</i>
        </div>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
        // 1.创建app
        const app = Vue.createApp({
            // data: option api
            data() {
                return {
                    infos: {name: "why", age: 18, height: 1.88}
                }
            },
        })

        // 2.挂载app
        app.mount("#app")
    </script>
</body>
</html>

4、数组更新检测

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。

这些被包裹过的方法包括：

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

替换数组的方法

  • 上面的方法会直接修改原来的数组；
  • 但是某些方法不会替换原来的数组，而是会生成新的数组，比如 filter()、concat() 和 slice()；
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
        <ul>
            <!-- 这个 in 关键字也可以使用 of 代替，两者作用完全相同 -->
            <li v-for="item in names">{{ item }}</li>
        </ul>
        <button @click="changeArray">修改数组</button>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
        // 1.创建app
        const app = Vue.createApp({
            // data: option api
            data() {
                return {
                    names: ["abc", "cba", "nba", "aaa", "ccc"]
                }
            },
            methods: {
                changeArray() {
                    // 1.直接将数组修改为一个新的数组
                    // this.names = ["why", "kobe"]

                    // 2.通过一些数组的方法, 修改数组中的元素
                    // this.names.push("why")
                    // this.names.pop()
                    // this.names.splice(2, 1, "why")
                    // this.names.sort()
                    // this.names.reverse()

                    // 3.不修改原数组的方法是不能侦听(watch)，因为该方法返回的是一个新数组
                    this.names.map(item => item + "why")
                }
            }
        })

        // 2.挂载app
        app.mount("#app")
    </script>
</body>
</html>

5、v-for中的key是什么作用？

在使用v-for进行列表渲染时，我们通常会给元素或者组件绑定一个key属性。

这个key属性有什么作用呢？我们先来看一下官方的解释：

  • key属性主要用在Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes；
  • 如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法；
  • 而使用key时，它会基于key的变化重新排列元素顺序，并且会移除/销毁key不存在的元素；

官方的解释对于初学者来说并不好理解，比如下面的问题：

  1. 什么是新旧nodes，什么是VNode？
  2. 没有key的时候，如何尝试修改和复用的？
  3. 有key的时候，如何基于key重新排列的？

5.1、认识VNode

我们先来解释一下VNode的概念：

  • 因为目前我们还没有比较完整的学习组件的概念，所以目前我们先理解HTML元素创建出来的VNode；
  • VNode的全称是Virtual Node，也就是虚拟节点；
  • 事实上，无论是组件还是元素，它们最终在Vue中表示出来的都是一个个VNode；
  • VNode的本质是一个JavaScript的对象；

5.2、虚拟DOM 

如果我们不只是一个简单的div，而是有一大堆的元素，那么它们应该会形成一个VNode Tree： 

5.3、插入F的案例 

我们先来看一个案例：这个案例是当我点击按钮时会在中间插入一个f； 

我们可以确定的是，这次更新对于ul和button是不需要进行更新，需要更新的是我们li的列表：

  • 在Vue中，对于相同父元素的子元素节点并不会重新渲染整个列表；
  • 因为对于列表中 a、b、c、d它们都是没有变化的；
  • 在操作真实DOM的时候，我们只需要在中间插入一个f的li即可；

那么Vue中对于列表的更新究竟是如何操作的呢？

  • Vue事实上会对于有key和没有key会调用两个不同的方法；
  • 有key，那么就使用 patchKeyedChildren方法；
  • 没有key，那么久使用 patchUnkeyedChildren方法；

5.4、Vue源码对于key的判断 

5.5、没有key的操作

没有key的过程如下 

我们会发现上面的diff算法效率并不高：

  • c和d来说它们事实上并不需要有任何的改动；
  • 但是因为我们的c被f所使用了，所有后续所有的内容都要一次进行改动，并且最后进行新增；

 

5.6、有key执行操作

有key的diff算法如下

第一步的操作是从头开始进行遍历、比较：

  • a和b是一致的会继续进行比较；
  • c和f因为key不一致，所以就会break跳出循环

第三步是如果旧节点遍历完毕，但是依然有新的节点，那么就新增节点： 

第四步是如果新的节点遍历完毕，但是依然有旧的节点，那么就移除旧节点： 

第五步是最特色的情况，中间还有很多未知的或者乱序的节点： 

所以我们可以发现，Vue在进行diff算法的时候，会尽量利用我们的key来进行优化操作：

  • 在没有key的时候我们的效率是非常低效的；
  • 在进行插入或者重置顺序的时候，保持相同的key可以让diff算法更加的高效；
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

悠然予夏

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

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

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

打赏作者

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

抵扣说明：

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

余额充值