模板语法入门：指令与插值

ynglan2026/05/01vue-beginnerVue 3 模板语法指令 v-bind v-if

模板语法入门：指令与插值

Vue 的模板语法让 HTML 变得"会思考"。这篇说说插值和常用指令。

插值：把数据塞进 HTML

文本插值

用双花括号 {{ }}：

<template>
  <p>我叫 {{ name }}，今年 {{ age }} 岁</p>
</template>

<script setup>
const name = '张三'
const age = 25
</script>

渲染结果：<p>我叫张三，今年 25 岁</p>

JavaScript 表达式

{{ }} 里可以写表达式：

<template>
  <p>{{ count + 1 }}</p>
  <p>{{ ok ? '是' : '否' }}</p>
  <p>{{ message.split('').reverse().join('') }}</p>
</template>

注意：只能写表达式，不能写语句（比如 if、for 要用指令）。

v-bind：动态绑定属性

:title 是 v-bind:title 的简写：

<template>
  <!-- 完整写法 -->
  <img v-bind:src="imageUrl" />

  <!-- 简写 -->
  <img :src="imageUrl" />

  <!-- 动态属性名 -->
  <a :[attrName]="url">链接</a>
</template>

<script setup>
const imageUrl = '/logo.png'
const attrName = 'href'
const url = 'https://example.com'
</script>

v-on：绑定事件

@click 是 v-on:click 的简写：

<template>
  <button v-on:click="handleClick">点击</button>
  <button @click="handleClick">简写</button>
</template>

<script setup>
function handleClick() {
  console.log('被点击了')
}
</script>

带参数：

<template>
  <button @click="say('你好')">打招呼</button>
  <button @click="count++">计数</button>
</template>

v-if 和 v-show：条件渲染

v-if 是真正的条件渲染，不满足条件时不渲染 DOM：

<template>
  <p v-if="isLoggedIn">欢迎回来</p>
  <p v-else>请登录</p>
</template>

v-show 是 CSS 层面的显示/隐藏，始终渲染，只是 display: none：

<template>
  <p v-show="isVisible">我会显示或隐藏</p>
</template>

选哪个？

v-if：切换不频繁，用它（有更高的切换开销）
v-show：频繁切换，用它（初始渲染开销大，但切换开销小）

v-for：列表渲染

渲染数组：

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

<script setup>
const items = [
  { id: 1, name: '苹果' },
  { id: 2, name: '香蕉' },
  { id: 3, name: '橘子' }
]
</script>

带索引：

<li v-for="(item, index) in items" :key="item.id">
  {{ index + 1 }}. {{ item.name }}
</li>

遍历对象：

<li v-for="(value, key) in user" :key="key">
  {{ key }}: {{ value }}
</li>

:key 必须加！它帮助 Vue 追踪每个节点，提高渲染性能。

v-model：双向绑定

表单输入和数据绑定：

<template>
  <input v-model="message" />
  <p>你输入的是：{{ message }}</p>
</template>

<script setup>
const message = ref('')
</script>

输入框的内容变了，message 自动更新；message 变了，输入框也自动更新。

指令总结

指令	作用	简写
v-bind	绑定属性	`:`
v-on	绑定事件	`@`
v-if	条件渲染	-
v-show	CSS 显示隐藏	-
v-for	列表渲染	-
v-model	双向绑定	-

下篇讲事件处理和 v-model 的原理。

模板语法入门：指令与插值

ON THIS PAGE