VueJS - 绑定属性对象

Question

在

Vue js

中，假设我们有以下代码：

<script setup>
import { Link } from "@inertiajs/vue3";
import { reactive } from 'vue'
</script>

<template>
        <div data-bs-toggle="collapse"
             data-bs-target="#Dashboard"
             aria-expanded="false"
             aria-controls="Dashboard"
        >       
           <i class="fa-solid fa-chart-line fa-lg lh-1"></i> 
        </div>
</template>

假设我们有大量像这样的

divs

且具有相同的属性，那么我们是否可以将属性提取到对象然后绑定它们，而不是一次又一次地键入相同的属性，如下所示：

<script setup>
import { Link } from "@inertiajs/vue3";
import { reactive } from 'vue'

const Object = reactive({
  data-bs-toggle:"collapse"
  data-bs-target:"#Dashboard"
  aria-expanded=:false
  aria-controls=:"Dashboard"
});
</script>
<template>
        <div :attr="Object" >       
           <i class="fa-solid fa-chart-line fa-lg lh-1"></i> 
        </div>
</template>

我们可以做这样的事情吗？

Answer 1

使用

v-bind

：
https://vuejs.org/guide/components/props.html#binding-multiple-properties-using-an-object

<div v-bind="Object" >