weixin_39052466
weixin_39052466
2021-05-21 07:09
采纳率: 100%
浏览 69

Vue做一个点击变色的按钮?

点击了,按钮自己颜色会变化的,如果能变色为随机色就更好?有这样的实例吗??

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

5条回答 默认 最新

  • weixin_50524151
    Proud lion 2021-05-21 10:01
    已采纳
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <style>
            #app{
                text-align: center;
            }
            button {
                width: 200px;
                height: 80px;
                border: 0px;
                border-radius: 10px;
                font-size: 24px;
                color: rgb(255, 255, 255);
                margin-top: 180px;
                cursor: pointer;
            }
        </style>
        <div id="app">
            <button :style="{background:color}" @click="changeColor">点击变色</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el: "#app",
                data: {
                    color: 'rgb(0,251,63)'
                },
                methods: {
                    changeColor() {
                        this.color =`rgb(${parseInt(Math.random()*255)},${parseInt(Math.random()*255)},${parseInt(Math.random()*255)})`
                    }
                },
            })
        </script>
    </body>
    
    </html>
    点赞 1 评论
  • showbo
    <div id="el">
        <input type="button" v-on:click="rndcolor" value="随机颜色" v-bind:style="{color:color}" />
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#el',
            data: { color: '#000' },
            methods: {
                rnd(min, max) {
                    if (max < min) [min, max] = [max, min];
                    return Math.floor(Math.random() * (max - min + 1) + min);
                },
                rndcolor() {
                    var chrs = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'];
                    var color = '#';
                    for (var i = 0; i < 6; i++)color += chrs[this.rnd(0, chrs.length - 1)];
                    this.color = color;
                }
            }
        })
    </script>
    点赞 1 评论
  • Mr_WangGeGe
    超小少 2021-05-21 09:08

    如代码示例即可:

    <template>
      <div>
        <div class="color_box" :style="{ backgroundColor: colorValue }"></div>
        <el-button type="primary" @click="handleClick">点击改变颜色</el-button>
      </div>
    </template>
    
    <script>
    export default {
      name: "",
      data() {
        return {
          colorValue: "#ff0000",
        };
      },
      methods: {
        //rgb颜色随机
        rgbColor() {
          let r = Math.floor(Math.random() * 256);
          let g = Math.floor(Math.random() * 256);
          let b = Math.floor(Math.random() * 256);
          if (r > 230 && g > 230 && b > 230) {
            r = 64;
            g = 158;
            b = 255;
          }
          return `rgb(${r},${g},${b})`;
        },
        colorSixteen() {
          //十六进制颜色随机
          let r = Math.floor(Math.random() * 256);
          let g = Math.floor(Math.random() * 256);
          let b = Math.floor(Math.random() * 256);
          let color = "#" + r.toString(16) + g.toString(16) + b.toString(16);
          return color;
        },
        //点击改变颜色
        handleClick() {
          this.colorValue = this.rgbColor();
        },
      },
    };
    </script>
    
    <style scoped lang="scss">
    .color_box {
      width: 100px;
      height: 40px;
      margin-bottom: 10px;
    }
    </style>
    
    点赞 1 评论
  • weixin_44980864
    浅影歌年 2021-05-21 09:18
    <template>
    <el-button type="primary" @click="clickFn" :style="{background: color}">主要按钮</el-button>
    </template>
    <script>
      export default {
        name: "index",
        data () {
          return {
            color: ''
          };
        },
        methods: {
          clickFn () {
            this.color = `rgb(${parseInt(Math.random()*255)},${parseInt(Math.random()*255)},${parseInt(Math.random()*255)})`;
          }
        }
      }
    </script>
    点赞 1 评论
  • weixin_44058725

    自己写个随机色事件呗,然后:style绑定就行 https://codepen.io/521guyu/pen/abJpYKx

    <!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->
    <template>
      <div id="app">
       
    
        <button :style="color" @click="doSomething">Say hello.</button>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          message: 'Welcome to Vue!',
          color:""
          
        };
      },
      methods: {
        doSomething() {
          this.color=this.getColor()
        },
        getColor() {
    var str = "#";
    //一个十六进制的值的数组
    var arr = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
    for (var i=0;i<6;i++){
    var num = parseInt(Math.random()*16); //随机产生0-15之间的一个数
    str += arr[num]; //产生的每个随机数都是一个索引,根据索引找到数组中对应的值,拼接到一起
    }
    console.log(`background:${str}`)
    return `background:${str}`;
    }
    
    
      }
    };
    </script>
    
    <!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
    <style>
    #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    
    a,
    button {
      color: #4fc08d;
    }
    
    button {
      background: none;
      border: solid 1px;
      border-radius: 2em;
      font: inherit;
      padding: 0.75em 2em;
    }
    </style>
    点赞 评论

相关推荐