vue3递归出来的class名怎么设置动态的margin

在Vue 3中，我们可以通过给元素绑定一个动态的class名来实现设置动态的margin。具体来说，我们可以使用v-bind指令来动态地绑定class名，并且在class名中使用模板字符串来设置动态的margin值。例如，假设我们有一个递归组件，它会根据传入的数据动态地生成一些子节点，我们希望每个子节点的margin-left值都是动态的，我们可以这样来实现：

<template>
  <div class="parent">
    <div v-for="item in items" :key="item.id" :class="{ 'child': true, 'ml-10': item.level > 0 }">
      <div v-if="item.children" class="child-container">
        <recursive-component :items="item.children"></recursive-component>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RecursiveComponent',
  props: {
    items: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style>
.child {
  padding: 10px;
  background-color: #f0f0f0;
}

.ml-10 {
  margin-left: 10px;
}
</style>

在上面的代码中，我们给每个子节点绑定了一个class名'child'，然后使用:class绑定了一个动态的class名'ml-10'，这个class名中使用了模板字符串来设置动态的margin-left值。具体来说，我们判断了传入的数据中每个节点的level属性是否大于0，如果大于0，则说明这个节点是一个子节点，需要设置margin-left值。最后，在样式中，我们定义了一个'ml-10'的class名，用来设置margin-left值。这样，每个子节点就会根据自己的level属性动态地设置margin-left值了。