Chapter 02 Vue指令（上）

news2024/9/28 13:28:55

欢迎大家订阅【Vue2+Vue3】入门到实践专栏，开启你的 Vue 学习之旅！

文章目录

前言
一、v-text指令
二、v-html指令
三、v-show指令
四、v-if指令
五、v-else指令
六、v-else-if指令

前言

在 Vue.js 中，指令是带有 v- 前缀的特殊属性，不同属性对应不同的功能。通过学习不同的指令，我们能够灵活应对多种业务场景的需求。本章详细讲解了一些基本的 Vue 指令，包括 v-text、v-html、v-show、v-if、v-else 以及 v-else-if 指令。

本篇文章参考黑马程序员

一、v-text指令

①作用：更新元素的文本内容

②语法：v-text="文本内容"

③注意事项：v-text 直接操作元素的 textContent 属性，会将元素内的所有文本内容替换为绑定的值，而不保留原来已经存在的文本内容或其他子元素。使用差值表达式{{}}可以替换指定内容。

【示例】

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-text指令</title>
</head>
<!--  v-text指令的作用：更新元素的文本内容 -->
<body>
    <div id="app">
        <!-- v-text指令会替换<h2>元素原本的文本内容 -->
            <!-- 内部支持写表达式 使用+符号来进行字符串的拼接操作-->
        <h2 v-text="message+'!'">深圳</h2>
        <h2 v-text="info+'!'">深圳</h2>
        <!--  默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容 -->
        <h2>{{ message +'!'}}深圳</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"Hello",
                info:"World"
            }
        })
    </script>
</body>

</html>

运行结果：
在这里插入图片描述

二、v-html指令

①作用：更新元素的 innerHTML，可插入 HTML 内容

②语法：v-html = " 表达式 "

【示例】
插值表达式并不具备解析标签的能力
差值表达式{{}}会将数据解释为纯文本，而不是 HTML。
在这里插入图片描述
若想插入 HTML，需要使用 v-html 指令。

点击“Vue 官网”即可跳转至 Vue 的官方网站

解析文本使用v-text
解析html结构使用v-html

三、v-show指令

①作用：基于表达式值的真假性来改变元素的可见性

②语法：v-show = "表达式"
（表达式值为true则显示，值为false则隐藏）

③原理：切换元素的 display 属性控制显示隐藏

④场景：频繁切换显示隐藏的场景

【示例】
表达式值为true时，元素正常显示。

<!DOCTYPE html>
<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>v-show指令</title>
  <style>
    .box {
      width: 200px;
      height: 100px;
      line-height: 100px;
      margin: 10px;
      border: 3px solid #000;
      text-align: center;
      border-radius: 5px;
      box-shadow: 2px 2px 2px #ccc;
    }
  </style>
</head>
<body>

  <div id="app">
    <div v-show=flag class="box">我是v-show控制的盒子</div> 
  </div>
  
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        flag: true
      }
    })
  </script>

</body>
</html>

运行结果：
在这里插入图片描述
表达式值为false时，元素的 display 属性会被设置为 none，从而使该元素隐藏。

<script>
  const app = new Vue({
    el: '#app',
    data: {
      flag: true
    }
  })
</script>

运行结果：
在这里插入图片描述

四、v-if指令

①作用：基于表达式值的真假性，来条件性地渲染元素或者模板片段。

②语法： v-if = "表达式"
（表达式值为true则显示，值为false则隐藏）

③原理：基于条件判断创建或移除元素节点

④场景：要么显示，要么隐藏，不频繁切换的场景

【示例】
表达式值为true时：

<!DOCTYPE html>
<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>v-if指令</title>
  <style>
    .box {
      width: 200px;
      height: 100px;
      line-height: 100px;
      margin: 10px;
      border: 3px solid #000;
      text-align: center;
      border-radius: 5px;
      box-shadow: 2px 2px 2px #ccc;
    }
  </style>
</head>
<body>

  <div id="app">
    <div v-if=flag class="box">我是v-if控制的盒子</div>
  </div>
  
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        flag: true
      }
    })
  </script>

</body>
</html>

运行结果：
在这里插入图片描述

表达式值为false时：

<script>
  const app = new Vue({
    el: '#app',
    data: {
      flag: true
    }
  })
</script>

运行结果：
在这里插入图片描述
v-show与v-if的主要区别：

v-show仅仅切换 display 属性，所以切换速度快，但在 DOM 中总是存在该元素，只是改变了样式。使用简单、开销小，适合频繁切换显示的场景。
v-if则是根据条件动态地添加或移除 DOM 元素。在条件为 false 时，元素会被完全移除，适合不经常切换显示的情况，但切换相对较慢，因为每次都要进行 DOM 操作。

五、v-else指令

①作用：辅助 v-if 进行判断渲染

②语法： v-else"

③注意事项：需紧挨着 v-if 一起使用

【示例】

  <div id="app">
    <p v-if="gender==1">性别：男</p>
    <p v-else>性别：女</p>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        gender:1
      }
    })
  </script>

</body>

运行结果：
在这里插入图片描述
将<p v-if="gender==1">性别：男</p>注释掉后：

<div id="app">
    <!-- <p v-if="gender==1">性别：男</p> -->
    <p v-else>性别：女</p>
  </div>

运行结果：
在这里插入图片描述
每个 v-else 都应该紧跟着一个对应的 v-if 或 v-else-if，否则就会报错，提示 v-else 没有对应的 v-if。

六、v-else-if指令

①作用：辅助 v-if 进行判断渲染

②语法： v-else-if = "表达式"

【示例】

<body>
  
  <div id="app">
    <p v-if="gender==1">性别：男</p>
    <p v-else>性别：女</p>
    <hr>
    <p v-if="score>=90">成绩评定A：奖励电脑一台</p>
    <p v-else-if="score>=90">成绩评定B：奖励周末郊游</p>
    <p v-else-if="score>=90">成绩评定C：奖励零食礼包</p>
    <p v-else="score>=90">成绩评定D：惩罚一周不能玩手机</p>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>

    const app = new Vue({
      el: '#app',
      data: {
        gender:1,
        score:88
      }
    })
  </script>

</body>