VUE3中<div v-for="item in list"><div class="a">{{item}}</div></div>如何让每个a中字体颜色不同实例

可以通过绑定动态class来实现每个a中字体颜色不同，可以使用v-bind:class指令来绑定一个计算属性，根据不同的属性值设置不同的样式。例如下面的代码可以为每个a元素随机生成一个颜色：

<template>
  <div v-for="item in list">
    <div :class="'a '+ getColor">{{item}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['apple', 'banana', 'orange', 'pear'],
    }
  },
  computed: {
    getColor() {
      return 'color-' + Math.floor(Math.random() * 5)
    }
  }
}
</script>

<style>
.color-0 {
  color: red;
}
.color-1 {
  color: blue;
}
.color-2 {
  color: green;
}
.color-3 {
  color: purple;
}
.color-4 {
  color: orange;
}
</style>

通过计算属性生成类名，然后在样式中定义不同的颜色即可。

相关问题

VUE3中<div v-for="item in list"><div class="a">{{item}}</div></div>如何让每个a中字体颜色不同

您可以使用Vue3中的动态绑定class来实现每个a元素中字体颜色不同的效果。您可以给每个item定义一个对应的class名字，并且为每个class定义不同的颜色，然后通过v-bind:class将该class动态绑定到相应的a元素上。代码示例：

<template>
  <div>
    <div v-for="(item, index) in list" :key="index">
      <div :class="'a color-' + index">{{item}}</div>
    </div>
  </div>
</template>

<style>
.a {
  font-size: 16px;
}

.color-0 {
  color: red;
}

.color-1 {
  color: blue;
}

.color-2 {
  color: green;
}
/* 依次类推 */
</style>

在上述代码中，我们首先使用v-for指令遍历list数据，通过:index属性获取到当前循环的索引，然后动态绑定class属性，并且将该class设置为"a"和"color-"加上当前索引的拼合结果，从而实现每个a元素的字体颜色不同的效果。可以根据需要自己定义不同颜色的class名字，并且通过:v-bind:class指令动态绑定到a元素上即可。

“<div v-for="(item, index) in List"> <div> <div>组织单元名称</div> <el-tooltip :disabled="isOverflow" :content="item.name" placement="top"> <div ref="bottomTitle" class="bottomTitle"> {{ item.name }} </div> </el-tooltip> </div> <div> <div>上级组织单元</div> <el-tooltip :disabled="isOverflow" :content="item.parent" placement="top"> <div ref="bottomTitle" class="bottomTitle"> {{ item.parent }} </div> </el-tooltip> </div> </div>”上述代码中需要单独判断遍历每个item.name和item.parent是否超出

要单独判断遍历每个 `item.name` 和 `item.parent` 是否超出，您可以在循环中为每个元素定义一个独立的 `isOverflow` 变量。以下是修改后的代码示例：

<div v-for="(item, index) in List">
  <div>
    <div>组织单元名称</div>
    <el-tooltip :disabled="!isOverflowName(item.name)" :content="item.name" placement="top">
      <div ref="bottomTitle" class="bottomTitle">
        {{ item.name }}
      </div>
    </el-tooltip>
  </div>
  <div>
    <div>上级组织单元</div>
    <el-tooltip :disabled="!isOverflowParent(item.parent)" :content="item.parent" placement="top">
      <div ref="bottomTitle" class="bottomTitle">
        {{ item.parent }}
      </div>
    </el-tooltip>
  </div>
</div>

在上述代码中，我们添加了两个新的方法 `isOverflowName` 和 `isOverflowParent`，这些方法用于判断 `item.name` 和 `item.parent` 是否超出。您可以根据实际需求自定义这两个方法的逻辑，例如通过比较文本长度和容器宽度来判断是否超出。

请注意，这里的 `isOverflowName` 和 `isOverflowParent` 是方法名，您需要在 Vue 实例中定义这两个方法，并根据实际情况编写逻辑。