Vue模板语法（二）

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

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>