面试题：Vue中Vue Fragment处理多根节点逻辑时如何绑定样式

Question

在Vue项目中，使用Vue Fragment处理复杂多根节点逻辑场景下，对于这些多根节点，如何分别为它们绑定不同的样式，并且保证样式在各种交互情况下能正确显示？请阐述具体实现思路和代码示例。

Answer 1

实现思路

1. 使用 scoped 样式：在 Vue 组件中，<style scoped> 可以让样式只作用于当前组件。对于不同的多根节点，可以在组件的 <style scoped> 标签内，通过不同的选择器来分别定义样式。
2. 动态绑定类名：结合 Vue 的数据绑定能力，通过动态绑定类名来根据不同的交互状态改变样式。可以在 data 中定义不同的状态变量，然后在模板中根据这些变量来绑定不同的类名。

代码示例

<template>
  <Fragment>
    <div :class="[isActive1 ? 'active1' : 'inactive1']" @click="toggleActive1">节点1</div>
    <div :class="[isActive2 ? 'active2' : 'inactive2']" @click="toggleActive2">节点2</div>
  </Fragment>
</template>

<script>
import { Fragment } from 'vue';

export default {
  components: {
    Fragment
  },
  data() {
    return {
      isActive1: false,
      isActive2: false
    };
  },
  methods: {
    toggleActive1() {
      this.isActive1 = !this.isActive1;
    },
    toggleActive2() {
      this.isActive2 = !this.isActive2;
    }
  }
};
</script>

<style scoped>
.inactive1 {
  background-color: lightgray;
}
.active1 {
  background-color: green;
}
.inactive2 {
  background-color: lightblue;
}
.active2 {
  background-color: red;
}
</style>

在上述代码中，通过 Fragment 包裹两个 <div> 多根节点。每个节点通过动态绑定类名，根据 isActive1 和 isActive2 的状态来显示不同的样式，并且通过点击事件来切换这些状态，保证在交互情况下样式能正确显示。同时，通过 <style scoped> 确保样式只作用于当前组件内的多根节点。