属性绑定

v-bind

双大括号不能在 HTML 属性上使用。想要响应式地绑定一个 HTML属性，应该使用 v-bind 指令：

    <!-- 正确的写法 -->
    <div v-bind:id="xxx"></div>
    <!-- 错误的写法 -->
    <div id={{ xxx }}></div>

v-bind 指令指示 Vue 将元素的id属性与定义的xxx状态保持一致。如果绑定的值是null或者undefined，那么该attribute将会从渲染的元素上移除。

我们使用下面的代码编写页面，观察页面元素效果

<template>
  <div>
    <div v-bind:id="xxx">F12审查页面元素</div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';

const xxx = ref('123456');


</script>

可以看到xxx状态的值123456已经成功赋值给页面元素的id，若是我们将xxx的值设置为null或者undefined,元素上将不会再有id属性

简写​

因为 v-bind 非常常用，vue提供了特定的简写语法：

<!-- 绑定变量 -->
<div :id="xxx"></div>
<!-- 绑定函数 -->
<div :id="getID"></div>
<!-- 使用js表达式 -->
<div :id="true?'123':'456'"></div>

动态绑定多个值

我们未来的写法都将使用简写语法，但也有一些例外，假设我们有像这样的一个包含多个属性的js对象：

const objectOfAttrs = {
  id: 'container',
  class: 'wrapper'
}

此时我们就可以通过不带参数的v-bind，将它们批量绑定到单个元素上：

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

上面的写法等价于

<div :id="objectOfAttrs.id"  :class="objectOfAttrs.class"></div>