Achieve random labels, font size, color random display

   Recently wrote graduation , Want to achieve the effect shown in the figure below （ Here is an example from the student's personal blog ）：

   As shown in the figure above , Random label , The font color is random , The font size is random .

   Here's my implementation code .

  <template></template> The code in ：

<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> The code in ：

<script>
export default {
    
  data() {
    
    return {
    
      tagList: [
        {
    
          id: 1,
          text: " front end ",
        },
        {
    
          id: 2,
          text: "JavaScript",
        },
        {
    
          id: 3,
          text: "Node.js",
        },
        {
    
          id: 4,
          text: "Vue",
        },
        {
    
          id: 5,
          text: "webpack",
        },
        {
    
          id: 6,
          text: " Personal summary ",
        },
        {
    
          id: 7,
          text: "React",
        },
        {
    
          id: 8,
          text: "TypeScript",
        },
      ],
    };
  },
  methods: {
    
    /*  Random font color  */
    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;
    },
    /*  Random font size  */
    getSize() {
    
      return Math.floor(Math.random() * 10 + 16) + "px";
    },
  },
  mounted() {
    },
};
</script>

  css The code is not pasted here, ha ha , Just adjust the spacing , Get rid of a The underline of the label and so on .

   As above, we can achieve .

   Be careful ： Here I am vue Written in the project , So it's in vue How to implement in .
   If you want to use native js stay html Implementation in file , You can write a function , And pass in the tag array parameter , Traverse every item in the array , Put the font color 、 The size and value are shown in a label , And put a The labels are spliced into html, Finally, get where you want to insert the value .innerHTML = Put together html, that will do . You can try .