面试题：Vue组件中如何基于不同的状态动态切换样式类名？

Question

假设你有一个Vue组件，该组件有一个布尔类型的`isActive`数据属性，当`isActive`为`true`时，需要应用一组特定的样式类（如`active - style`和`highlight - style`），当为`false`时，应用另一组样式类（如`inactive - style`）。请详细说明如何实现这种动态样式类名的切换，包括在模板和数据定义方面的操作，并给出代码示例。

Answer 1

1. 数据定义： 在Vue组件的data函数中定义isActive属性。

export default {
  data() {
    return {
      isActive: false
    };
  }
};

2. 模板中动态样式类名切换： 可以使用对象语法或数组语法来动态切换样式类。
   • 对象语法：

<template>
  <div :class="{ 'active-style': isActive, 'highlight-style': isActive, 'inactive-style':!isActive }">
    这里是组件内容
  </div>
</template>

• 数组语法：

<template>
  <div :class="[isActive? ['active-style', 'highlight-style'] : ['inactive-style']]">
    这里是组件内容
  </div>
</template>

完整的Vue组件示例：

<template>
  <div :class="{ 'active-style': isActive, 'highlight-style': isActive, 'inactive-style':!isActive }">
    这里是组件内容
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    };
  }
};
</script>

<style scoped>
.active-style {
  color: red;
}
.highlight-style {
  background-color: yellow;
}
.inactive-style {
  color: gray;
}
</style>