Vue2从基础到实战（指令篇）

news2025/10/31 12:41:50

Vue中的常用指令！

概念：指令（Directives）是 Vue 提供的带有 v- 前缀 的特殊标签属性。

vue 中的指令按照不同的用途可以分为如下 6 大类：

内容渲染指令（v-html、v-text）
条件渲染指令（v-show、v-if、v-else、v-else-if）
事件绑定指令（v-on）
属性绑定指令（v-bind）
双向绑定指令（v-model）
列表渲染指令（v-for）

v-html

v-html（类似 innerHTML）

- 使用语法：<p v-html="intro">hello</p>，意思是将 intro 值渲染到 p 标签中
- 类似 innerHTML，使用该语法，会覆盖 p 标签原有内容
- 类似 innerHTML，使用该语法，能够将HTML标签的样式呈现出来。

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js Example</title>
</head>
<body>
    <div class="box2"></div>
    <div class="box"></div>

    <div id="app">
        <div v-html="msg">{{ msg }}</div>
    
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
            msg: `
                <a href="http://www.baidu.com">
                    欢迎访问sxx
                </a>
            `
            }
        })
    </script>
</body>
</html>

点击则会跳转到百度浏览器！

V-show和V-if

V-show

作用：控制元素显示隐藏
语法： v-show = "表达式" 表达式值为 true 显示， false 隐藏
原理：切换 display:none 控制显示隐藏
场景：频繁切换显示隐藏的场景

V-if

作用：控制元素显示隐藏（条件渲染）
语法： v-if= "表达式" 表达式值 true显示， false 隐藏
原理：基于条件判断，是否创建或移除元素节点
场景：要么显示，要么隐藏，不频繁切换的场景

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js 示例</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: lightblue;
            margin: 10px 0;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-show="flag" class="box">我是 v-show 控制的盒子</div>
        <div v-if="flag" class="box">我是 v-if 控制的盒子</div>
        <button @click="toggleFlag">切换 Flag</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                flag: false
            },
            methods: {
                toggleFlag() {
                    this.flag = !this.flag;
                }
            }
        });
    </script>
</body>
</html>