模板语法与指令（v-bind、v-if、v-for 等）

Vue 3 的模板语法是其易用性的核心体现，它允许开发者通过声明式的方式将数据与 DOM 绑定，并通过指令实现动态效果。相比传统的 JavaScript 操作 DOM，Vue 的模板语法更加直观、高效。本节将详细介绍 Vue 3 的模板语法基础以及常用指令（如 v-bind、v-if、v-for 等），并通过示例帮助你掌握它们的用法。

模板语法基础

Vue 3 的模板基于 HTML，开发者可以在标准的 HTML 标签中嵌入 Vue 的语法，包括插值表达式和指令。

1. 插值表达式

插值表达式使用双花括号 {{}}，用于将数据动态渲染到模板中。

<template>
  <p>{{ message }}</p>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      const message = ref('Hello Vue 3!');
      return { message };
    }
  };
</script>
  • 运行结果：页面显示“Hello Vue 3!”。
  • 特点：插值内容会随数据变化自动更新，支持简单的 JavaScript 表达式（如 {{ count + 1 }}），但不适合复杂逻辑。

2. 单次渲染

如果只需要渲染一次数据，不需要响应式更新，可以使用 v-once 指令：

<template>
  <p v-once>{{ message }}</p>
</template>
  • 效果：即使 message 后续改变，页面也不会更新。

常用指令

Vue 的指令是带有 v- 前缀的特殊属性，用于在模板中实现动态行为。以下是几个最常用的指令：

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

v-bind 用于将数据绑定到 HTML 属性（如 src、class、style 等）。它有一个简写形式 :。

示例：绑定图片路径

<template>
  <img v-bind:src="imageUrl" alt="Vue Logo" />
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      const imageUrl = ref('https://vuejs.org/images/logo.png');
      return { imageUrl };
    }
  };
</script>
  • 简写形式：<img :src="imageUrl" alt="Vue Logo" />
  • 效果：图片的 src 属性会动态设置为 imageUrl 的值。

示例：动态类名

<template>
  <div :class="{ active: isActive }">动态类名</div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      const isActive = ref(true);
      return { isActive };
    }
  };
</script>

<style>
  .active {
    color: red;
  }
</style>
  • 效果：当 isActive 为 true 时，div 应用 active 类，文本变红。

2. v-if：条件渲染

v-if 用于根据条件显示或隐藏元素，条件为假时元素不会渲染到 DOM 中。

示例：条件显示

<template>
  <p v-if="isVisible">你可以看到我！</p>
  <button @click="toggleVisibility">切换</button>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      const isVisible = ref(true);
      const toggleVisibility = () => {
        isVisible.value = !isVisible.value;
      };
      return { isVisible, toggleVisibility };
    }
  };
</script>
  • 效果：点击按钮时，<p> 元素在 DOM 中出现或消失。
  • 相关指令：
    • v-else：与 v-if 配对使用。
    • v-else-if：多条件判断。
<template>
  <p v-if="score >= 90">优秀</p>
  <p v-else-if="score >= 60">及格</p>
  <p v-else>不及格</p>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const score = ref(85);
    return { score };
  }
};
</script>

3. v-show：条件显示

与 v-if 类似，但 v-show 通过 CSS 的 display 属性控制显示，元素始终保留在 DOM 中。

<template>
  <p v-show="isVisible">我用的是 v-show</p>
</template>
  • 区别：v-if 是真正的条件渲染，v-show 只是切换可见性，适合频繁切换的场景。

4. v-for：列表渲染

v-for 用于循环渲染列表数据，支持数组、对象等。

示例：渲染数组

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const items = ref([
      { id: 1, name: '苹果' },
      { id: 2, name: '香蕉' },
      { id: 3, name: '橙子' }
    ]);
    return { items };
  }
};
</script>
  • 运行结果：
    - 苹果
- 香蕉
- 橙子
  • 注意：:key 是必须的，用于帮助 Vue 高效更新 DOM，建议使用唯一标识（如 id）。

示例：带索引的循环

<template>
  <ul>
    <li v-for="(item, index) in items" :key="item.id">
      {{ index + 1 }}. {{ item.name }}
    </li>
  </ul>
</template>
  • 效果：显示带编号的列表，如“1. 苹果”。

指令修饰符

Vue 提供了一些修饰符来增强指令功能，例如：

  • @click.prevent：阻止默认事件。
  • :value.number：将输入值转换为数字。
<template>
  <form @submit.prevent="submitForm">
    <input type="number" :value.number="num" @input="updateNum" />
    <button type="submit">提交</button>
  </form>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const num = ref(0);
    const updateNum = (event) => {
      num.value = event.target.value;
    };
    const submitForm = () => {
      console.log('表单提交，值：', num.value);
    };
    return { num, updateNum, submitForm };
  }
};
</script>

总结

Vue 3 的模板语法和指令为开发者提供了声明式编程的便利。通过插值表达式和指令（如 v-bind、v-if、v-for），你可以轻松实现数据的动态呈现和交互逻辑。本节的示例展示了这些基础用法，在后续章节中，我们将结合具体场景深入探讨如何将它们应用于实际项目。动手试试这些代码，感受 Vue 3 的强大吧！

Last Updated::