VUE基础02-熟悉绑定

attribute绑定

vue中为了给属性绑定一个动态值，需要使用v-bind指令：

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

指令是由 v- 开头的一种特殊 attribute。
冒号后面的部分 (:id) 是指令的“参数”。此处，元素的 id attribute 将与组件状态里的 dynamicId 属性保持同步。

由于 v-bind 使用地非常频繁，它有一个专门的简写语法：

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

示例：

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

const titleClass = ref('title')
</script>

<template>
  <h1 :class="titleClass">Make me red</h1> <!-- 此处添加一个动态 class 绑定 -->
</template>

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