属性绑定

什么是属性绑定

使用 v-bind 指令可以将 Vue 实例中的数据与 HTML 元素的属性进行绑定，当数据发生变化时，元素的属性也会随之变化。

绑定元素属性

v-bind 指令指示 Vue 将 HTML 元素的属性（这里是 src）与组件的属性（这里是 imgSrc 和 src）保持一致。如果绑定的值是 null 或 undefined，那么该属性会从渲染的元素上移除。

<template>
    <div class="div-box">
        <img v-bind:src="imgSrc" />

        <img :src="imgSrc" />

        <!-- 同名简写 vue3.4 以上 -->
        <img :src />

        <img v-bind:src />
    </div>
</template>

<script setup lang="ts">
const imgSrc = "https://img2.baidu.com/it/u=3027327506,3393866148&fm=253&fmt=auto&app=138&f=JPEG?w=130&h=170";

const src = "https://img0.baidu.com/it/u=1472956462,1218866004&fm=253&fmt=auto&app=120&f=JPEG?w=144&h=143"
</script>

绑定布尔值属性

布尔值的属性绑定会根据 true 或 false 的值来决定是否将属性添加到元素上。

<template>
    <div class="div-box">
        <button :disabled="!isButtonDisabled">启用按钮</button>

        <button :disabled="isButtonDisabled">禁用按钮</button>
    </div>
</template>

<script setup lang="ts">
const isButtonDisabled = true;
</script>

绑定对象属性

通过不带参数的 v-bind 指令，可以将包含多个属性的对象绑定到单个元素上。

<template>
    <div class="div-box">
        <p v-bind="objectOfAttrs">Attribute Bind Multiple Valued</p>
    </div>
</template>

<script setup lang="ts">
const objectOfAttrs = {
    id: 'id1',
    class: 'class1',
    style: 'color: red'
}
</script>

<style scoped>
.class1 {
    font-size: 20px;
    font-weight: bold;
}
</style>