v-for循环中改变单个div样式

在Vue.js中，如果你想要通过v-for循环动态地改变每个div的样式，你可以结合`v-bind:class`指令或者直接操作元素的style属性。这里有两种常见的方式：

1. **使用v-bind:class**:

<template>
  <div v-for="(item, index) in items" :key="index">
    <div :class="{ active: item.isActive }">{{ item.content }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { content: '内容1', isActive: false },
        { content: '内容2', isActive: true },
        // 更多项...
      ]
    }
  }
}
</script>

<style scoped>
.active {
  background-color: red; /* 根据isActive的状态改变样式 */
}
</style>

在这个例子中，如果`item.isActive`为`true`，那么对应的div会拥有`active`类，应用相应的CSS样式。

2. **直接操作style属性**:

<template>
  <div v-for="(item, index) in items" :key="index">
    <div :style="{ backgroundColor: item.isActive ? 'red' : 'white' }">{{ item.content }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { content: '内容1', isActive: false },
        { content: '内容2', isActive: true },
        // 更多项...
      ]
    }
  }
}
</script>

这里，每项循环元素的背景色会被设置为红色或白色，取决于`isActive`的状态。