Vue 常用指令详解

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

文章目录

[Vue 常用指令详解](#Vue 常用指令详解)

[1. v-bind 指令](#1. v-bind 指令)

[1.1 概述](#1.1 概述)

[1.2 语法](#1.2 语法)

[1.3 参数说明](#1.3 参数说明)

[1.4 完整示例代码](#1.4 完整示例代码)

解释

[2. v-model 指令](#2. v-model 指令)

[2.1 概述](#2.1 概述)

[2.2 语法](#2.2 语法)

[2.3 参数说明](#2.3 参数说明)

[2.4 完整示例代码](#2.4 完整示例代码)

解释

[3. v-if, v-else-if, v-else 指令](#3. v-if, v-else-if, v-else 指令)

[3.1 概述](#3.1 概述)

[3.2 语法](#3.2 语法)

[3.3 参数说明](#3.3 参数说明)

[3.4 完整示例代码](#3.4 完整示例代码)

解释

[4. v-for 指令](#4. v-for 指令)

[4.1 概述](#4.1 概述)

[4.2 语法](#4.2 语法)

[4.3 参数说明](#4.3 参数说明)

[4.4 完整示例代码](#4.4 完整示例代码)

解释

[5. v-show 指令](#5. v-show 指令)

[5.1 概述](#5.1 概述)

[5.2 语法](#5.2 语法)

[5.3 参数说明](#5.3 参数说明)

[5.4 完整示例代](#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 完整示例代码

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 完整示例代码

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 完整示例代码

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 完整示例代码

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 完整示例代

html

复制代码

解释

HTML 部分 : 一个按钮用于切换文本的显示状态。在按下按钮后，使用 v-show 指令决定 p 标签是否可见。

Vue 实例 : 初始状态下，文本是可见的，点击按钮时会切换 isVisible 的值，从而影响文本的显隐程度。