4.2 模板语法与内置指令

4.2 模板语法与内置指令

本节摘要：Vue 用双花括号插值与 v- 开头的内置指令把数据"钉"进模板。插值显示文本，v-bind 绑属性，v-if/v-show 控条件，v-for 渲列表。掌握这一小组指令，就掌握了 Vue 声明式的日常主力，也正对应第 2.5 节的两种结构。

本节阅读目标
阅读完本节，你应当能够：

1. 在模板里用插值与 v-bind 把数据接进视图。
2. 用 v-if / v-show 做条件渲染并说清二者取舍。
3. 用 v-for 渲列表并正确使用 key。

一、插值：把数据写进文本

双花括号是 Vue 文本插值的基本入口：

<template>
  <p>你好，{{ user }}，你有 {{ unread }} 条未读。</p>
</template>
<script setup>
import { ref } from 'vue';
const unread = ref(3);
const user = '阿明';
</script>
​

花括号里的表达式会在数据变化时自动更新——这就是响应式系统在工作（详见 4.4 节）。

二、绑定属性与元素：v-bind

要让属性、class、style 跟着数据走，用 v-bind（可简写为冒号 :）：

<template>
  <a :href="link" :class="active ? 'on' : ''">链接</a>
</template>
​

v-bind 是"把 JS 表达式的结果赋给 HTML 属性"，它让属性也"由数据决定"，正是声明式的体现。

三、条件渲染：v-if 与 v-show

• v-if：为假时元素不渲染、销毁；适合不常切换。
• v-show：元素始终渲染，仅用样式显隐；适合频繁切换。

<template>
  <p v-if="loading">加载中…</p>
  <p v-show="error">出错了</p>
</template>
​

对应第 2.5 节的取舍：v-if 真渲真销，v-show 显隐切换，按切换频率选择。

四、列表渲染：v-for 与 key

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

每项给稳定唯一的 key，让 diff 能识别它（回到 2.2 节）。别用 index 当 key，重排时身份会错位。

五、图：Vue 内置指令全家谱

图：内置指令各司其职

六、常见坑

• v-for 与 v-if 同元素：Vue 里两者优先级与期望有时相悖，最好拆成两个元素或用计算筛选。
• key 用 index：重排时状态错乱，改稳定 id。
• 忘写冒号简写：把 :href 写成 href 就变成死字符串，数据不生效是高频错因。

七、把几个指令拼进一个真实小界面

单独记忆每条指令不难，难的是它们同时出现时不乱。下面这个"可筛选的待办列表"一次性用到了插值、v-bind、v-if、v-for、v-show 和 @click（事件绑定，4.6 节会展开）：

<template>
  <div class="panel">
    <p v-show="keyword">共筛到 {{ filtered.length }} 项</p>
    <ul>
      <li v-for="todo in filtered" :key="todo.id"
          :class="{ done: todo.done }">
        {{ todo.title }}
      </li>
    </ul>
    <p v-if="filtered.length === 0">没有匹配的待办</p>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue';
const keyword = ref('');
const todos = ref([
  { id: 1, title: '学模板语法', done: true },
  { id: 2, title: '写一个小待办', done: false },
]);
const filtered = computed(() =>
  todos.value.filter((t) => t.title.includes(keyword.value) || !keyword.value)
);
</script>
​

看一眼角色分工：插值与 :class 负责"显示什么、长什么样"，v-if 负责空态兜底，v-show 控制那条统计文案的显隐，v-for 铺列表。四类指令在同一块结构里各管一件事而不打架，正是"模板是声明式骨架"的最佳注解——你描述意图，Vue 负责落地。computed 计算属性是下一节的主角，这里先混个脸熟。

让 v-bind 把"一整个对象"也接进模板

文本插值之外，v-bind 还有一层常被低估的威力：它能一次把整个对象展开进元素属性。比如渐变逻辑复杂时，先把要绑的 class 或样式算成一个对象，再 :class="boxStyle" 一起接进模板，而不是在一行里堆一长串表达式。

<template>
  <div :class="cardClass" :style="cardStyle">卡片内容</div>
</template>
<script setup>
import { computed } from 'vue';
const theme = 'dark';
const cardClass = computed(() => (theme === 'dark' ? 'card card-dark' : 'card'));
const cardStyle = computed(() => ({ padding: '12px', lineHeight: 1.6 }));
</script>
​

看到两个 computed 各自只算"一类东西"：一个管 class，一个管 style，职责清晰，模板里就一个冒号引用。这样把"绑定的值算在哪"前移到 script 里，模板保持又短又直白，跟上一节强调的"让模板当骨架、把逻辑收回脚本"是同一件事。等你到 5 章组件封装的场景，你会发现 :class/:style 这种"值来自一个对象"的写法，正是设计可扩展组件接口最常用的一张牌。

本节要点回顾

• 插值：双花括号填文本，数据变了自动更新。
• v-bind：把表达式赋给属性，简写冒号。
• v-if / v-show：真渲真销 vs 显隐切换，看切换频率。
• v-for + key：遍历渲列表，稳定唯一 key 供 diff 识别。
• 常见坑：v-for/v-if 同元素、key 用 index、忘简写冒号。

模板与指令是 Vue 表达界面的语法基座。下一节看另一种对照：Vue 的两种 API——Options 与 Composition，如何在脚本里组织逻辑。