Vue 3 属性绑定（超详细）

大家好，我是小哈。

本小节中，我们将学习如何在 Vue 3 中进行属性绑定功能。

什么是属性绑定？

属性绑定就是将视图页面中的标签属性和对应变量光联起来，当变量发生变化时，页面中的相关数据也会自动更新，无需手动操作 DOM 元素。

绑定属性值

v-bind 指令可用于绑定 HTML 属性，它们包括 class 、 src 、title 等等。语法格式如下：

<标签 v-bind:属性="值"></标签>

也可以通过 : 进行简写，格式如下：

<标签 :属性="值"></标签>

示例

以下是一个属性绑定的示例，我们定义了一个 <a> 标签，同时通过 v-bind 指令将 href 属性绑定到了 path 变量上：

<template>
  <div>
  
    <!-- 绑定属性 -->
    <a v-bind:href="path" style="display: block;">犬小哈教程</a>
    
    <!-- v-bind 指令简写模式 -->
    <a :href="path" style="display: block;">犬小哈教程</a>
  
  </div>
</template>

<script setup>
  import { ref } from 'vue'

  // 定义一个 path 响应式变量，用于绑定 href 属性
  const path = ref('https://www.quanxiaoha.com')

</script>

运行结果如下：

绑定 CSS 样式

接下来，我们演示如何通过 v-bind 指令绑定样式类，示例代码如下：

<template>
  <div>

    <!-- 绑定样式, 如果 isActive 为 True 则 red 样式生效  -->
    <p><a class="bg-black" v-bind:class="{ red: isActive }">犬小哈教程</a></p>

  </div>
</template>

<script setup>
  import { ref } from 'vue'
  // 定义一个响应式变量
  const isActive = ref(true)

</script>

<style>
  .red {
    color: red;
  }
  
  .bg-black {
    background-color: black;
  }
</style>

在上面的代码中，当 isActive 变量值为 True 时，渲染结果为：

<a class="bg-black red">犬小哈教程</a>

效果图如下：

通过数组绑定多个 CSS 样式

也可以将一个数组传给 v-bind， 示例代码如下：

<template>
  <div>

    <!-- 通过数组同时绑定多个样式 -->
    <p><a v-bind:class="[classes.color, classes.background]">犬小哈教程</a></p>

  </div>
</template>

<script setup>
  import { reactive } from 'vue'

  const classes = reactive({
    color: 'red',
    background: 'bg-black'
  })
</script>

<style>
  .red {
    color: red;
  }

  .bg-black {
    background-color: black;
  }
</style>

通过三目运算绑定 CSS 样式

如果你想根据条件动态切换样式，也可以通过三目运算符来实现，示例代码如下：

<template>
  <div>

    <!-- 通过三目运算绑定样式, 如何 isActive 为 True 则应用 red 样式，否则为空样式 -->
    <p><a :class="isActive ? 'red' : ''">犬小哈教程</a></p>
    
  </div>
</template>

<script setup>
  import { ref } from 'vue'

  const isActive = ref(true)

</script>

<style>
  .red {
    color: red;
  }
</style>

运行效果如下: