Frontend Academy · 课时

指令：v-if、v-for、v-bind 与 v-on

使用 v-if 和 v-show 进行条件渲染，使用 v-for 循环，使用 v-bind 动态绑定属性，并使用 v-on 监听 DOM 事件。

指令：v-if、v-for、v-bind 与 v-on 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

什么是 Vue 指令

指令是以 v- 开头的特殊属性，用于告诉 Vue 对 DOM 元素执行某项操作。它们会作为 JavaScript 表达式求值，并对响应式数据的变化做出反应。

v-if、v-else-if、v-else

v-if 根据表达式是否为真来有条件地渲染元素。条件为假时，该元素会从 DOM 中完全移除。v-else 用于提供回退内容。

<div v-if="isLoggedIn">
  <UserDashboard />
</div>
<div v-else-if="isLoading">
  <Spinner />
</div>
<div v-else>
  <LoginForm />
</div>

v-show——切换可见性

v-show 会切换 CSS display: none，而不是将元素从 DOM 中添加或移除。当元素需要频繁切换时，请使用 v-show；当条件很少变化时，请使用 v-if。

<!-- Good for frequently toggling: -->
<div v-show="isDropdownOpen">...</div>

<!-- Good for rarely changing: -->
<div v-if="userHasPremium">...</div>

v-for——渲染列表

v-for="item in items" 会为每个项目渲染一次元素。请始终包含 :key，以确保更新稳定。

<ul>
  <li v-for="user in users" :key="user.id">
    {{ user.name }} — {{ user.email }}
  </li>
</ul>

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

对对象使用 v-for

遍历对象的值，或遍历键值对。

<dl>
  <template v-for="(value, key) in user" :key="key">
    <dt>{{ key }}</dt>
    <dd>{{ value }}</dd>
  </template>
</dl>

v-bind——绑定属性

v-bind:attr 或其简写形式 :attr 会将 HTML 属性动态绑定到响应式值。

<img :src="user.avatar" :alt="user.name">
<a :href="getLink(post.id)">{{ post.title }}</a>
<button :disabled="isLoading" :class="{ active: isActive }">Save</button>

v-bind 对象语法

使用对象一次绑定多个属性。

<input v-bind="{
  type: 'email',
  placeholder: 'Enter email',
  disabled: isSubmitting
}">

类绑定：:class

可以使用对象（键为类名，值为条件）或数组，有条件地绑定 CSS 类。

<div :class="{ 'is-active': isActive, 'has-error': hasError }">...</div>

<!-- Array syntax: -->
<div :class="[baseClass, isActive ? 'active' : '']">

<!-- Dynamic in script setup: -->
:class="{ card: true, [variantClass]: true }"

样式绑定：:style

使用 camelCase 对象绑定内联样式。

<div :style="{ backgroundColor: brandColor, padding: spacing + 'px' }">

v-on——监听事件

v-on:event 或其简写形式 @event 用于添加事件侦听器。

<button @click="handleClick">Click Me</button>
<input @input="value = $event.target.value">
<form @submit.prevent="handleSubmit">...</form>

事件修饰符

Vue 提供了内置事件修饰符：.prevent（preventDefault）、.stop（stopPropagation）、.once（只触发一次）、.self（仅当目标元素就是该元素本身时触发）和 .passive（提升滚动性能）。

<form @submit.prevent="submit">
<button @click.stop="selectItem">
<div @click.self="closeModal">
<div @scroll.passive="onScroll">

快速检查

什么时候应该使用 v-show 而不是 v-if？

回顾：Vue 指令

v-if 会从 DOM 中移除或添加元素。v-show 会切换显示状态。v-for 用于渲染列表（始终提供 :key）。v-bind（:）用于绑定属性，包括 :class 和 :style。v-on（@）用于添加事件侦听器。事件修饰符包括 .prevent、.stop 和 .once。v-model 用于双向绑定（结合了 v-bind:value 和 v-on:input）。

常见问题解答

「指令：v-if、v-for、v-bind 与 v-on」课时是免费的吗？

是的 — 「指令：v-if、v-for、v-bind 与 v-on」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「指令：v-if、v-for、v-bind 与 v-on」这节课中我会学到什么？

使用 v-if 和 v-show 进行条件渲染，使用 v-for 循环，使用 v-bind 动态绑定属性，并使用 v-on 监听 DOM 事件。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「指令：v-if、v-for、v-bind 与 v-on」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy