Vue 常用指令详解（附代码实例）

news2025/1/15 12:59:55

Vue 常用指令详解

在本文中，我将详细的介绍 Vue.js 中常用的指令，并提供了相关实例代码来帮助更好地理解它们的用法。

文章目录

Vue 常用指令详解
- 1. v-bind 指令
- - 1.1 概述
  - 1.2 语法
  - 1.3 参数说明
  - 1.4 完整示例代码
  - 解释
- 2. v-model 指令
- - 2.1 概述
  - 2.2 语法
  - 2.3 参数说明
  - 2.4 完整示例代码
  - 解释
- 3. v-if, v-else-if, v-else 指令
- - 3.1 概述
  - 3.2 语法
  - 3.3 参数说明
  - 3.4 完整示例代码
  - 解释
- 4. v-for 指令
- - 4.1 概述
  - 4.2 语法
  - 4.3 参数说明
  - 4.4 完整示例代码
  - 解释
- 5. v-show 指令
- - 5.1 概述
  - 5.2 语法
  - 5.3 参数说明
  - 5.4 完整示例代
  - 解释

1. v-bind 指令

1.1 概述

v-bind 指令用于在 Vue.js 应用中动态绑定 HTML 属性。它可以通过 JavaScript 数据模型来改变元素的属性值。

1.2 语法

v-bind:attributeName="dataProperty"

1.3 参数说明

attributeName: 例如 src、href、class 等 HTML 属性。
dataProperty: 在 Vue 实例中定义的数据属性，可以是字符串、数字或对象。

1.4 完整示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-bind 示例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="app">
        <img v-bind:src="imageSrc" alt="Vue Logo">
        <h1 v-bind:class="headerClass">欢迎使用 Vue!</h1>
    </div>

    <script>
        new Vue({
            el: '#app',  // 绑定 Vue 实例到 id 为 'app' 的 div 元素
            data: {
                imageSrc: 'https://vuejs.org/images/logo.png',  // 设置要显示的图片地址
                headerClass: 'header'  // 设置要使用的 CSS 类
            }
        });
    </script>

    <style>
        .header {
            color: blue;  // 设置 header 类的文本颜色为蓝色
        }
    </style>
</body>
</html>

解释

HTML 结构: 使用 img 标签动态绑定 src 属性显示 Vue 的 logo，并绑定 h1 标签的 class 属性以应用 CSS 样式。
Vue 实例: Vue 实例绑定到 DOM 元素并提供数据来源。
样式: 自定义 header 类的样式，使文本呈现蓝色。

2. v-model 指令

2.1 概述

v-model 指令用于在表单元素（如 input、textarea 或 select）和 Vue 实例之间建立双向数据绑定。

2.2 语法

v-model="dataProperty"

2.3 参数说明

dataProperty: 绑定到输入元素的值的 Vue 实例中的数据属性。

2.4 完整示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model 示例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="app">
        <input v-model="username" placeholder="请输入用户名">
        <p>你的用户名是: {{ username }}</p>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                username: ''  // 定义一个用户名的初始值为空
            }
        });
    </script>
</body>
</html>

解释

HTML 部分: 一个输入框用于接受用户的输入，绑定变量 username，同时展示输入的用户名。
双向绑定: 当用户在输入框中输入内容时，username 的值也会实时更新，反之亦然。

3. v-if, v-else-if, v-else 指令

3.1 概述

通过 v-if、v-else-if 和 v-else，可以根据条件渲染不同的 DOM 元素。

3.2 语法

v-if="condition"
v-else-if="condition"
v-else

3.3 参数说明

condition: 一个布尔值的 JavaScript 表达式，用于判断是否渲染特定内容。

3.4 完整示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-if 示例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="app">
        <p v-if="isLoggedIn">欢迎回来, {{ username }}!</p>
        <p v-else-if="isGuest">你好, 游客!</p>
        <p v-else>请登录!</p>
        <button @click="toggleLogin">切换登录状态</button>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                isLoggedIn: false,  // 用户初始状态为未登录
                isGuest: true,      // 用户初始状态为游客
                username: '小明'    // 用户名
            },
            methods: {
                toggleLogin() {
                    this.isLoggedIn = !this.isLoggedIn;  // 切换登录状态
                    this.isGuest = !this.isGuest;        // 切换游客状态
                }
            }
        });
    </script>
</body>
</html>

解释

HTML 部分: 根据用户的登录状态显示不同的信息。若用户已登录则显示欢迎信息；若为游客则显示访客信息；否则提醒用户登录。
Vue 实例: 定义了用户的登录状态和用户名。通过一个按钮可以切换登录状态，按钮的点击会触发 toggleLogin 方法，更新界面内容。

4. v-for 指令

4.1 概述

v-for 指令用于在数组或对象上渲染动态列表，能够生成多个相同类型的 DOM 元素。

4.2 语法

v-for="(item, index) in items"

4.3 参数说明

item: 当前循环迭代的元素名称，可以自定义。
index: 当前元素的索引（可选）。
items: 需要遍历的数组或对象。

4.4 完整示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-for 示例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item, index) in items" :key="item.id">{{ index + 1 }}. {{ item.name }}</li>
        </ul>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                items: [  // 定义一个数组包含多个水果信息
                    { id: 1, name: '苹果' },
                    { id: 2, name: '香蕉' },
                    { id: 3, name: '橘子' }
                ]
            }
        });
    </script>
</body>
</html>

解释

HTML 结构: 使用 ul 和 li 标签来渲染出一个水果的列表。v-for 循环迭代 items 数组，为每个水果生成一个列表项。
:key 属性: 为每个 li 提供一个 key 属性，使 Vue 能够更高效地更新和渲染列表。

5. v-show 指令

5.1 概述

v-show 指令通过修改元素的 CSS display 属性来控制元素的显示或隐藏。与 v-if 不同，v-show 在切换显示状态时不会销毁和重建 DOM 元素。

5.2 语法

v-show="condition"

5.3 参数说明

condition: 返回布尔值的 JavaScript 表达式，用于决定元素是否显示。

5.4 完整示例代

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-show 示例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="app">
        <button @click="toggle">切换显示</button>
        <p v-show="isVisible">这个文本可以显示或隐藏</p>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                isVisible: true  // 初始状态为可见
            },
            methods: {
                toggle() {
                    this.isVisible = !this.isVisible;  // 切换可见状态
                }
            }
        });
    </script>
</body>
</html>