Vue front end realizes random background color

Foreword:

The requirement is that several modules corresponding to the page should display multiple different random colors every time they are opened, and the displayed colors will change when you click Refresh. I just encapsulated it into a function. If there are deficiencies, I hope you can give me more pointers. code show as below.

---

step:

1. wrap a function
2. Use the for loop, how many background colors need to be used, just loop a few times
3. Use **Math.floor()** rounding down to round up the obtained value
4. Use the Math.random() method to get random numbers
5. toString(16) is converted to hexadecimal
6. Click Refresh to call the encapsulated function again
7. Click the color block to assign the color to the input box
8. The background color page changes accordingly

---

Function effect display:

Vue realizes random background color

---

code:

This code contains all the required functions. The element-ui framework is used in this article. Part of the code functions can be found on the official website. Except for some codes, all other functions are completed using Vue.

Click to jump to element-ui official document: https://element.eleme.cn/#/zh-CN/component/installation

<template>
  <div class="box">
    <el-input v-model="input" placeholder="请输入内容"></el-input>
    <div class="top">
      <div
        class="boxlist"
        v-for="(item, index) in lists"
        :key="index"
        v-bind:style="{
          backgroundColor: item,
        }"
        @click="addcolor(item)"
      >
        <p>{
   
   { item }}</p>
      </div>
    </div>
    <el-button type="primary" @click="add">主要按钮</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      Number: "",
      lists: [],
      input: "",
    };
  },
  mounted() {
    // 进入时调用
    this.randoms();
  },
  methods: {
    randoms() {
      // 循环
      for (var i = 0; i < 24; i++) {
        // 把获取到的值赋值给 Number
        this.Number =
          "#" +
          // 下舍入（0-1随机数 乘以 255）转换为16进制
          Math.floor(Math.random() * 255).toString(16) +
          Math.floor(Math.random() * 255).toString(16) +
          Math.floor(Math.random() * 255).toString(16);
        // 追加到 lists 中
        this.lists.push(this.Number);
      }
    },
    add() {
      // 点击清空 lists
      this.lists = [];
      // 调用封装函数
      this.randoms();
    },
    addcolor(item) {
      // 颜色在 input 框中显示
      this.input = item;
      // 背景色改变
      this.$refs.top.style.backgroundColor = item;
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  background-color: rgb(196, 191, 191);
  .top {
    display: flex;
    flex-wrap: wrap;
    .boxlist {
      width: 150px;
      height: 150px;
      margin: 25px;
      p {
        width: 100%;
        height: 30px;
        background-color: #fff;
        line-height: 30px;
      }
    }
  }
}
</style>

---

Summarize:

The above is the method of realizing random background color in vue. If you don’t know it, you can ask me in the comment area or chat with me in private. I will continue to release some new functions in the future, so stay tuned.
My other articles: https://blog.csdn.net/weixin_62897746?type=blog