vue3学习笔记之属性绑定

属性绑定

1. 基本语法

在 Vue 3 里，使用 : 或者 v-bind: 来进行属性绑定。这两种写法是等价的，: 是 v-bind: 的缩写形式。以下是示例代码：

<template>
  <!-- 使用缩写形式 -->
  <img :src="imageUrl" alt="An example image">
  <!-- 使用完整形式 -->
  <a v-bind:href="linkUrl">Click me</a>
</template>

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

// 定义响应式数据
const imageUrl = ref('https://example.com/image.jpg');
const linkUrl = ref('https://example.com');
</script>

在上述代码中，imageUrl 和 linkUrl 是响应式数据，当它们的值发生变化时，对应的 src 和 href 属性也会随之更新。

2. 绑定布尔属性

对于布尔属性（如 disabled、checked 等），属性的存在与否代表 true 或 false。可以根据表达式的值来动态添加或移除这些属性。示例如下：

<template>
  <button :disabled="isButtonDisabled">Click me</button>
</template>

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

// 定义响应式数据
const isButtonDisabled = ref(true);
</script>

在这个例子中，当 isButtonDisabled 的值为 true 时，disabled 属性会被添加到 button 元素上，按钮变为不可用状态；当 isButtonDisabled 的值为 false 时，disabled 属性会被移除，按钮变为可用状态。

3. 绑定动态属性名

在某些情况下，你可能需要动态地绑定属性名。可以使用方括号 [] 来实现动态属性名绑定。示例如下：

<template>
  <div :[dynamicAttribute]="dynamicValue">This is a div</div>
</template>

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

// 定义响应式数据
const dynamicAttribute = ref('title');
const dynamicValue = ref('This is a dynamic title');
</script>

在这个例子中，dynamicAttribute 的值决定了要绑定的属性名，dynamicValue 的值决定了属性的值。这里最终会将 title 属性绑定到 div 元素上，其值为 This is a dynamic title。

4. 绑定样式和类

绑定内联样式

可以使用 :style 指令来绑定内联样式。可以绑定一个对象，对象的键是 CSS 属性名，值是对应的 CSS 属性值。示例如下：

<template>
  <div :style="{ color: textColor, fontSize: fontSize + 'px' }">This is a styled div</div>
</template>

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

// 定义响应式数据
const textColor = ref('red');
const fontSize = ref(16);
</script>

在这个例子中，textColor 和 fontSize 是响应式数据，当它们的值发生变化时，div 元素的 color 和 font-size 样式也会随之更新。

绑定类名

可以使用 :class 指令来绑定类名。可以绑定一个对象或数组。

• 对象语法：根据对象的键值对来动态添加或移除类名。键是类名，值是一个布尔值，表示是否添加该类名。示例如下：

<template>
  <div :class="{ active: isActive, 'text-danger': hasError }">This is a div with dynamic classes</div>
</template>

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

// 定义响应式数据
const isActive = ref(true);
const hasError = ref(false);
</script>

在这个例子中，当 isActive 为 true 时，active 类会被添加到 div 元素上；当 hasError 为 true 时，text-danger 类会被添加到 div 元素上。

• 数组语法：根据数组中的元素来添加类名。数组中的元素可以是字符串或对象。示例如下：

<template>
  <div :class="[activeClass, { 'text-danger': hasError }]">This is a div with dynamic classes</div>
</template>

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

// 定义响应式数据
const activeClass = ref('active');
const hasError = ref(false);
</script>

在这个例子中，activeClass 对应的值会作为类名添加到 div 元素上，同时根据 hasError 的值决定是否添加 text-danger 类名。

5. 绑定多个属性

可以使用 v-bind 指令绑定一个包含多个属性的对象，一次性绑定多个属性。示例如下：

<template>
  <img v-bind="imageAttrs" alt="An example image">
</template>

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

// 定义响应式数据
const imageAttrs = ref({
  src: 'https://example.com/image.jpg',
  width: 200,
  height: 200
});
</script>

在这个例子中，imageAttrs 对象中的 src、width 和 height 属性会被绑定到 img 元素上。