第 2 课：v-bind 属性绑定

• 日期：2026-09-01
• 课程序号：第 2 课
• 知识点：v-bind、属性表达式与缩写

用途

让链接地址、图片路径和禁用状态等属性随响应式数据变化。

核心概念

• v-bind:属性="表达式" 绑定属性，:属性 是缩写。
• 未绑定的普通属性值是静态字符串。

最小代码示例

<div id="app"><a :href="courseUrl">打开课程</a></div>
<script type="module">
import { createApp } from 'vue';
createApp({ data: () => ({ courseUrl: '/courses/vue' }) }).mount('#app');
</script>

3～5 分钟练习

绑定按钮的 disabled，让 finished 为 true 时按钮不可用。

参考答案

<button :disabled="finished">继续学习</button>

与上一课的联系

上一课用插值显示响应式文本；本课把响应式数据连接到元素属性。