Chapter 02 Vue指令(上)

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

文章目录


前言

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


本篇文章参考黑马程序员

一、v-text指令

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

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

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

【示例】

html 复制代码
<!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时,元素正常显示。

html 复制代码
<!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,从而使该元素隐藏。

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

运行结果:

四、v-if指令

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

②语法: v-if = "表达式"

(表达式值为true则显示,值为false则隐藏)

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

④场景:要么显示,要么隐藏,不频繁切换的场景

【示例】

表达式值为true时:

html 复制代码
<!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时:

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

运行结果:

v-showv-if的主要区别:

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

五、v-else指令

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

②语法: v-else"

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

【示例】

html 复制代码
  <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>注释掉后:

html 复制代码
<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 = "表达式"

【示例】

html 复制代码
<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>
相关推荐
__不想说话__13 分钟前
面试官问我React组件和state的关系,我指了指路口的红绿灯…
前端·javascript·react.js
番茄比较犟16 分钟前
Combine知识点switchToLatest
前端
北京_宏哥17 分钟前
🔥《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(15)-Charles如何配置反向代理
前端·面试·charles
随笔记19 分钟前
vite构建工具和webpack构建工具有什么共同点和不同处
vue.js·react.js·webpack
Process20 分钟前
前端图片技术深度解析:格式选择、渲染原理与性能优化
前端·面试·性能优化
大松鼠君21 分钟前
轿车3D展示
前端·webgl·three.js
却尘22 分钟前
URL参数传递的两种方式:查询参数与路径参数详解
前端
下辈子再也不写代码了24 分钟前
分片下载、断点续传与实时速度显示的实现方法
前端·后端·github
婷婷婷婷24 分钟前
AntV X6 常用方法
前端
LucianaiB33 分钟前
拿到Offer,租房怎么办?看我用高德MCP+腾讯云MCP,帮你分分钟搞定!
前端·后端·cursor