Vue 指令

学习 Vue 最常用的指令：v-bind、v-if、v-for、v-on、v-model · 难度：入门 · +20XP

Vue 指令入门

指令（Directives）是 Vue 提供的一套特殊属性，写在 HTML 标签上，用来让页面元素和数据联动。

所有 Vue 指令都以 v- 开头，比如 v-bind、v-if、v-for。

v-bind：给属性绑定数据

普通的 HTML 属性是写死的：<a href="https://example.com">链接</a>

但如果你想动态改变链接地址呢？用 v-bind：

<div id="app">
  <a v-bind:href="url">点击这里</a>
  <br>
  <img v-bind:src="imgSrc" width="200">
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
  data() {
    return {
      url: "https://www.w3schools.com",
      imgSrc: "https://www.w3schools.com/vue/img_vue.jpg"
    }
  }
}).mount("#app")
</script>

速记法：v-bind:href 可以简写为 :href，效果完全一样。

写法	说明
v-bind:href="url"	完整写法
:href="url"	简写（推荐）

v-if：条件渲染

根据条件决定一个元素显示还是隐藏：

<div id="app">
  <p v-if="score >= 60">恭喜，你及格了！</p>
  <p v-else>很遗憾，没及格。继续加油！</p>
  <button @click="score = score - 10">减 10 分</button>
</div>
<script>
Vue.createApp({
  data() { return { score: 70 } }
}).mount("#app")
</script>

当 score 小于 60 时，第一行消失，第二行出现。v-if 真的会从页面上移除元素，不是隐藏。

v-show：显示和隐藏

v-show 也能控制显示/隐藏，但它用 CSS 的 display 属性来切换，元素始终留在页面上：

<p v-show="isVisible">你能看到我吗？</p>
<button @click="isVisible = !isVisible">切换</button>

指令	原理	何时用
v-if	真的添加/删除元素	切换不频繁，条件很少改变
v-show	改 CSS display	切换频繁（比如一个开关反复按）

v-for：循环渲染

如果你的数据是一个数组，v-for 帮你生成多个元素：

<div id="app">
  <ul>
    <li v-for="fruit in fruits">{{ fruit }}</li>
  </ul>
</div>
<script>
Vue.createApp({
  data() {
    return {
      fruits: ["苹果", "香蕉", "橙子", "葡萄", "西瓜"]
    }
  }
}).mount("#app")
</script>

运行后页面上自动生成 5 个 li。你在数组里加一个水果，列表自动多一行。

如果需要索引，可以这样写：

<li v-for="(fruit, index) in fruits">{{ index + 1 }}. {{ fruit }}</li>

动手练习

1. 自己写一个待办事项列表，用 v-for 循环显示
2. 给列表加上 v-if，当列表为空时显示"没有待办事项"
3. 试试 v-show：做一个开关，点击切换一段文字的显示/隐藏