属性绑定

Attribute 绑定

v-bind 指令（简写为 :）用于动态绑定 Attribute。

<!-- 简写 -->
<div :id="dynamicId"></div>
<!-- 完整写法 -->
<div v-bind:id="dynamicId"></div>

同名简写 3.4 及以上

<!-- 与 :id="id" 相同 -->
<div :id></div>

<!-- 这也同样有效 -->
<div v-bind:id></div>

布尔型 Attribute

布尔型 attribute 依据 true / false 值来决定 attribute 是否应该存在于该元素上。

disabled 就是最常见的例子之一：

<button :disabled="isButtonDisabled">Button</button>

动态绑定多个值

<script setup>
const objectOfAttrs = {
  id: 'container',
  class: 'wrapper',
  style: 'background-color:green',
}
</script>

<template>
  <div v-bind="objectOfAttrs"></div>
</template>

class 绑定

基本使用

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

const isActive = ref(true)
const hasError = ref(false)
const classObject = reactive({
  'active': true,
  'text-danger': false,
})

const activeClass = ref('active')
const errorClass = ref('text-danger')
</script>

<template>
  <div :class="{ active: isActive }"></div>
  <div :class="{ 'active': isActive, 'text-danger': hasError }"></div>
  <div :class="classObject"></div>

  <div :class="[activeClass, errorClass]"></div>
  <div :class="[isActive ? activeClass : '', errorClass]"></div>

  <div :class="[{ [activeClass]: isActive }, errorClass]"></div>
</template>

在组件上使用

• 对于只有一个根元素的组件，当你使用了 class attribute 时，这些 class 会被添加到根元素上并与该元素上已有的 class 合并。
• 如果你的组件有多个根元素，你将需要指定哪个根元素来接收这个 class。可以通过组件的 $attrs 属性来指定接收的元素：

style 绑定

基本使用

<script setup>
const activeColor = ref('red')
const fontSize = ref(30)
const styleObject = reactive({
  color: 'red',
  fontSize: '30px',
})

const baseStyles = {
  color: 'red',
  fontSize: '14px',
}
const overridingStyles = {
  fontSize: '16px',
  fontWeight: 'bold',
}
</script>

<template>
  <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
  <div :style="styleObject"></div>

  <div :style="[baseStyles, overridingStyles]"></div>
</template>