vue2 循环生成的el-tag标签添加随机背景色并设置字体颜色为纯白

在 Vue2 中，可以通过 `v-for` 指令循环生成 `el-tag` 标签，并通过 `:style` 绑定动态样式来设置随机背景色和字体颜色为纯白。示例代码如下：

<template>
  <div>
    <el-tag v-for="(tag, index) in tags" :key="index" :style="{ backgroundColor: tag.color, color: '#fff' }">{{ tag.name }}</el-tag>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tags: [
        { name: '标签1', color: getRandomColor() },
        { name: '标签2', color: getRandomColor() },
        { name: '标签3', color: getRandomColor() },
        { name: '标签4', color: getRandomColor() },
        { name: '标签5', color: getRandomColor() }
      ]
    }
  }
}

function getRandomColor() {
  const colors = ['#f50', '#2db7f5', '#87d068', '#108ee9', '#f04134', '#a5673f']
  return colors[Math.floor(Math.random() * colors.length)]
}
</script>

在上述代码中，`getRandomColor` 函数用于随机生成颜色值，`tags` 数组中包含了标签的名称和颜色，`v-for` 指令循环遍历该数组，动态生成 `el-tag` 标签，并通过 `:style` 绑定动态样式来设置标签的背景色和字体颜色。