点击了，按钮自己颜色会变化的，如果能变色为随机色就更好？有这样的实例吗？？
<!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>
<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>
如代码示例即可：
<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>
<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>
自己写个随机色事件呗，然后：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>