实现随机标签，字体大小、颜色随机显示

  最近写毕业，想实现一下如下图所示的效果（这里以学弟个人博客里的为示例）：

  如上图所示，随机标签，字体颜色随机，字体大小随机。

  下面贴一下我的实现代码。

  <template></template>中的代码：

<router-link
  v-for="item in tagList"
  :key="item.id"
  :to="`/tag/${item.id}`"
  :style="{ color: getColor(), fontSize: getSize() }"
  >{{ item.text }}
</router-link>

  <script>/<script>中的代码：

<script>
export default {
  data() {
    return {
      tagList: [
        {
          id: 1,
          text: "前端",
        },
        {
          id: 2,
          text: "JavaScript",
        },
        {
          id: 3,
          text: "Node.js",
        },
        {
          id: 4,
          text: "Vue",
        },
        {
          id: 5,
          text: "webpack",
        },
        {
          id: 6,
          text: "个人总结",
        },
        {
          id: 7,
          text: "React",
        },
        {
          id: 8,
          text: "TypeScript",
        },
      ],
    };
  },
  methods: {
    /*
    随机字体颜色
    */
    getColor() {
      var colorArr = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f".split(",");
      var color = "#";
      for (var i = 0; i < 6; i++) {
        color += colorArr[Math.floor(Math.random() * 16)];
      }
      return color;
    },
    /*
    随机字体大小
    */
    getSize() {
      return Math.floor(Math.random() * 10 + 16) + "px";
    },
  },
  mounted() {},
};
</script>

  css代码这里就不粘贴了哈哈，也就调一下间距，去掉a标签的下划线之类的。

  如上即可实现。

  注意：这里我是在 vue 项目里写的，所以是在vue中的实现方式。
  如果想用原生 js 在 html 文件中实现，可以写一个函数，并传入标签数组这个参数，遍历数组中的每一项，把字体颜色、大小和值都展示在a标签，并把a标签拼接成html，最后获取一下要插入值的地方.innerHTML = 拼成的html，即可。可以试试。