东月的文档站

Appearance

Return to top
On this page

为什么需要属性绑定？

HTML 属性（如 href、src、class、disabled）在普通 HTML 里是写死的：

html
<a href="https://vuejs.org">官网</a>    <!-- href 永远是 vuejs.org -->

但你经常需要动态改变属性值，比如：

  • 切换不同图片：src 要根据数据变化
  • 禁用/启用按钮：disabled 要根据状态变化
  • 跳转不同链接：href 要根据用户操作变化 这时就要用 v-bind。

基本用法

v-bind 让 HTML 属性的值可以跟 Vue 的数据绑定：

vue
<template>
  <a v-bind:href="url">前往官网</a>
  <img v-bind:src="imageSrc" alt="logo">
</template>
<script>
export default {
  data() {
    return {
      url: 'https://vuejs.org',
      imageSrc: 'logo.png'
    }
  }
}
</script>

渲染出来的 HTML 就是：

html
<a href="https://vuejs.org">前往官网</a>
<img src="logo.png" alt="logo">

v-bind 后面跟的属性名 = HTML 属性名，等号后面是数据变量。

简写

v-bind 太长了，Vue 提供了简写——直接用冒号 :：

vue
<a :href="url">链接</a>           <!-- 等于 v-bind:href="url" -->
<img :src="imageSrc">             <!-- 等于 v-bind:src="imageSrc" -->

几乎所有 Vue 开发者都用简写，看到 : 就理解为"这是一个动态属性"。

布尔属性

有些 HTML 属性不需要值，存在就生效，比如 disabled、checked、readonly。

vue
<template>
  <button :disabled="isDisabled">提交</button>
</template>
<script>
export default {
  data() {
    return {
      isDisabled: true     // true → 按钮禁用
    }
  }
}
</script>

Vue 特殊处理了布尔属性：

  • true → 属性存在 → 按钮禁用
  • false → 属性移除 → 按钮可用
  • null 或 undefined → 属性也不渲染

绑定多个属性

如果你有一个对象，想把它的所有属性都绑到元素上：

vue
<template>
  <div v-bind="attrs">内容</div>
</template>
<script>
export default {
  data() {
    return {
      attrs: {
        id: 'myDiv',
        class: 'container',
        title: '提示信息'
      }
    }
  }
}
</script>

渲染结果等于：

html
<div id="myDiv" class="container" title="提示信息">内容</div>

总结

| 写法 | 含义 | | v-bind:href="url" | 完整写法 | | :href="url" | 简写（推荐） | | :disabled="true" | 布尔属性 | | v-bind="obj" | 批量绑定 | 记住：HTML 属性要动态改变 → 前面加冒号 :。 下一步： 💡 Tip：Composition API 写法（Vue 3）

vue
<script setup>
import { ref } from 'vue'
const url = ref('https://vuejs.org')
const isDisabled = ref(true)
</script>

模板中的 :href、:disabled 等写法完全不变。 详见：