4、Vue 3 （2024 版）基础笔记 - 属性绑定

要想为元素绑定属性，需要使用 v-bind 指令，其形式如下：

<div v-bind:id="dynamicId"></div>

v-bind 是一个非常常用的指令，Vue 为其提供了一个简写的方法，如下：

<div :id="dynamicId"></div>

准备工作

创建一个新组件用于演示属性的绑定。关于组件，暂时跟着操作就可以了。

1、创建组件

src/components/Attr.vue

<template></template>

<script setup lang="ts"></script>

2、引入组件

src/App.vue

<template>
	...
	
	<!-- 使用组件 -->
    <attr></attr>
</template>

<script setup lang="ts">
    import Attr from "@/components/Attr.vue";

	...
</script>

属性绑定

绑定单个值

src/components/Attr.vue

<template>
    <a href="" :title="title" :id="id">王丽丽</a>

</template>

<script setup lang="ts">
    const title = "我的世界很奇妙"
    const id = 10
</script>

浏览器访问后，打开 F12 查看一下元素信息，如下：

<a href="" title="我的世界很奇妙" id="10">王丽丽</a>

同名简写

如果 attribute 的名称与绑定的 JavaScript 值的名称相同，那么可以进一步简化语法，省略 attribute 值：

src/components/Attr.vue

<template>
    <a href="" :title :id>王丽丽</a>

</template>

<script setup lang="ts">
    const title = "我的世界很奇妙"
    const id = 10
</script>

动态绑定多个值

src/components/Attr.vue

<template>
    <a href="" v-bind="objectAttrs">王丽丽</a>
</template>

<script setup lang="ts">
    const objectAttrs = {
        class:"active",
        id:1,
        title:"我的世界很奇妙"
    }
</script>