在循环中使用时，无法在vue js中应用样式/类

<template>
  <div>
    <div v-for="item in items" :class="getClass(item)">{{ item.name }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: 'item1', isActive: true },
        { name: 'item2', isActive: false },
        { name: 'item3', isActive: true }
      ]
    };
  },
  methods: {
    getClass(item) {
      return item.isActive ? 'active' : '';
    }
  }
};
</script>

<style>
.active {
  color: red;
}
</style>

<template>
  <div>
    <div v-for="item in items" :style="getStyle(item)">{{ item.name }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: 'item1', color: 'red' },
        { name: 'item2', color: 'blue' },
        { name: 'item3', color: 'green' }
      ]
    };
  },
  methods: {
    getStyle(item) {
      return {
        color: item.color
      };
    }
  }
};
</script>

<template>
  <div>
    <component v-for="item in items" :is="getComponent(item)">{{ item.name }}</component>
  </div>
</template>

<script>
import Item1 from './Item1.vue';
import Item2 from './Item2.vue';
import Item3 from './Item3.vue';

export default {
  data() {
    return {
      items: [
        { name: 'item1', type: 'item1' },
        { name: 'item2', type: 'item2' },
        { name: 'item3', type: 'item3' }
      ]
    };
  },
  methods: {
    getComponent(item) {
      switch (item.type) {
        case 'item1':
          return Item1;
        case 'item2':
          return Item2;
        case 'item3':
          return Item3;
        default:
          return null;
      }
    }
  }
};
</script>