当前位置：首页 > article >正文

Vue3 常用指令解析：v-bind、v-if、v-for、v-show、v-model

article 2025/2/22 5:08:32

Vue 是一个非常强大的前端框架，提供了许多常用指令来简化模板的使用。Vue 指令以 v- 开头，用于对 DOM 元素和组件的行为进行控制。本文将介绍 Vue 中常见的五个指令：v-bind、v-if、v-for、v-show 和 v-model，并通过实例代码来演示它们的用法。

1. `v-bind`：动态绑定属性

v-bind 用于动态绑定 HTML 元素的属性或者组件的 props。通过 v-bind，我们可以将一个变量的值绑定到 HTML 元素的属性上，这样当数据发生变化时，属性值也会随之更新。

示例：

<template>
  <!-- 动态绑定图片的 src 属性 -->
  <img v-bind:src="图片地址" alt="Vue Logo">
</template>

<script>
export default {
  data() {
    return {
      // 图片地址
      图片地址: 'https://vuejs.org/images/logo.png'
    };
  }
};
</script>

输出：

当 图片地址 变量的值变化时，<img> 标签的 src 属性会自动更新。

简写方式：

<template>
  <!-- 使用冒号（:）作为 v-bind 的简写 -->
  <img :src="图片地址" alt="Vue Logo">
</template>

2. `v-if`：条件渲染

v-if 用于根据条件判断是否渲染某个元素或组件。只有在条件为 true 时，元素才会被渲染到 DOM 中。与 v-show 不同，v-if 会完全销毁和重新渲染元素。

示例：

<template>
  <div>
    <!-- 切换元素是否可见 -->
    <button @click="是否显示 = !是否显示">切换显示</button>
    <p v-if="是否显示">这段文字根据条件显示</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 控制元素是否显示
      是否显示: true
    };
  }
};
</script>

输出：

点击按钮时，是否显示 的值会发生变化，控制 <p> 元素的显示或隐藏。

3. `v-for`：列表渲染

v-for 用于渲染一个数组或对象的列表。通过它，Vue 可以根据数据的变化自动生成相应的 DOM 元素。

示例：

<template>
  <ul>
    <!-- 遍历数组并生成多个 <li> 元素 -->
    <li v-for="(水果, 索引) in 水果列表" :key="索引">{{ 水果 }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      // 水果列表
      水果列表: ['苹果', '香蕉', '樱桃']
    };
  }
};
</script>

输出：

Vue 会遍历 水果列表 数组，生成多个 <li> 元素，显示其中的每个水果。

注意：

使用 v-for 时要加上 :key 属性，以提高渲染性能，确保每个元素有唯一标识。

4. `v-show`：显示与隐藏

v-show 用于根据条件控制元素的显示与隐藏。与 v-if 不同，v-show 只是通过改变元素的 display 样式来控制显示与隐藏，并不会销毁元素。

示例：

<template>
  <div>
    <!-- 切换元素的显示与隐藏 -->
    <button @click="是否显示 = !是否显示">切换显示</button>
    <p v-show="是否显示">这段文字根据条件显示或隐藏</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 控制元素是否显示
      是否显示: true
    };
  }
};
</script>

输出：

点击按钮时，是否显示 的值变化，控制 <p> 元素的显示或隐藏。

注意：

v-show 是通过 CSS 的 display 属性控制显示与隐藏，不会销毁 DOM 元素，因此适用于需要频繁切换显示状态的场景。

5. `v-model`：双向数据绑定

v-model 用于创建表单控件（如 input、textarea）与 Vue 实例之间的双向数据绑定。它可以自动将用户的输入值同步到数据变量中，同时数据变化时也会更新视图。

示例：

<template>
  <div>
    <!-- 双向绑定输入框的值 -->
    <input v-model="输入内容" placeholder="请输入一些内容">
    <p>输入框中的内容是：{{ 输入内容 }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 输入框的值
      输入内容: ''
    };
  }
};
</script>

输出：