二、Vue 模板语法与指令大全：从 v-if 到 v-for（附代码示例）

1. Vue 模板语法概览

Vue 的模板语法是 HTML 的扩展，通过插值和指令实现数据绑定与动态渲染。核心特性包括：

插值表达式：{{ }} 实时渲染数据
指令系统：以 v- 开头的特殊属性（如 v-if、v-for）
简写语法：:attr 代替 v-bind:attr，@event 代替 v-on:event

2. 基础指令详解

2.1 插值与文本绑定

`{{ }}` 插值表达式

<template>
  <p>当前时间：{{ currentTime }}</p>
</template>

<script>
export default {
  data() {
    return { currentTime: new Date().toLocaleTimeString() };
  }
};
</script>

`v-text` 指令

<div v-text="message"></div>
<!-- 等价于 -->
<div>{{ message }}</div>

2.2 条件渲染

指令	说明	示例代码
`v-if`	条件成立时渲染元素	`<div v-if="isLogin">欢迎用户</div>`
`v-else`	`v-if` 的否则分支	`<div v-if="isLogin">已登录</div><div v-else>请登录</div>`
`v-else-if`	多条件分支	`<div v-if="score>90">A</div><div v-else-if="score>60">B</div>`
`v-show`	通过 `display` 控制显示/隐藏	`<div v-show="isVisible">内容</div>`

注意：v-if 是惰性渲染（条件不成立时不渲染 DOM），而 v-show 始终渲染但控制可见性。

2.3 列表渲染

`v-for` 基础用法

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ index }}. {{ item.name }} - {{ item.age }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 }
      ]
    };
  }
};
</script>

遍历对象

<div v-for="(value, key, index) in userInfo">
  {{ key }}: {{ value }} (索引: {{ index }})
</div>

最佳实践：:key 应使用唯一标识（如 id）而非索引，避免列表更新时的性能问题。

3. 高级指令与特性

3.1 属性绑定

`v-bind` 基础

<img :src="imageUrl" :alt="imageAlt" />
<!-- 动态 class -->
<div :class="['box', {'active': isActive}]"></div>
<!-- 动态 style -->
<div :style="{ color: textColor, fontSize: '16px' }"></div>

缩写语法

:src="imageUrl"       → v-bind:src="imageUrl"  
@click="handleClick"  → v-on:click="handleClick"

3.2 事件处理

事件修饰符

修饰符	作用	示例代码
`.stop`	阻止事件冒泡	`<button @click.stop="handle"></button>`
`.prevent`	阻止默认行为	`<a @click.prevent="handle" href="#">链接</a>`
`.once`	事件只触发一次	`<button @click.once="handle">提交</button>`

按键修饰符

<input @keyup.enter="submit" />  <!-- 监听回车键 -->
<input @keyup.delete="handle" />  <!-- 监听删除键 -->

3.3 双向绑定

`v-model` 基础

<template>
  <input v-model="username" placeholder="请输入用户名" />
  <p>输入内容：{{ username }}</p>
</template>

<script>
export default {
  data() { return { username: '' } }
};
</script>

修饰符

修饰符	作用	示例代码
`.trim`	自动过滤首尾空格	`<input v-model.trim="username" />`
`.number`	转换为数值类型	`<input v-model.number="age" />`
`.lazy`	延迟更新（默认在 input 事件后）	`<input v-model.lazy="message" />`

4. 其他实用指令

4.1 `v-once` 单次渲染

<div v-once>初始值：{{ count }}</div>
<button @click="count++">+1</button>
<!-- 点击按钮时，v-once 内容不会更新 -->

4.2 `v-html` 渲染 HTML 内容

<div v-html="htmlContent"></div>
<script>
export default {
  data() {
    return { htmlContent: '<p style="color:red">危险内容</p>' };
  }
};
</script>

注意：此指令存在 XSS 风险，应避免渲染不可信内容。

5. 指令对比与最佳实践

场景	推荐指令	原因
条件渲染	`v-if`（条件不成立时卸载）	适合低频切换场景
频繁显示/隐藏	`v-show`	通过 CSS 控制，性能更优
列表渲染	`v-for` + 唯一 `:key`	避免渲染错误，提升更新效率
表单双向绑定	`v-model`	简化数据同步逻辑
动态属性/样式	`v-bind` 简写 `:`	语法简洁，支持复杂表达式