根据按钮颜色改变正方形颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>exercise</title>
<style>
.abc{
width: 200px;
height: 200px;
}
.green{
background-color: green;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
</style>
</head>
<body>
<div id="id1">
<div>
<input type="button" class="btn1 " @click="change_color1">
</div>
<div>
<input type="button" class="btn2 " @click="change_color2">
</div>
<div>
<input type="button" class="btn3 " @click="change_color3">
</div>
<div :style="myStyle1" id="id2">box</div>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#id1',
data:{
myStyle1: {
width: '200px',
height: '200px',
backgroundColor: 'orange'
},
},
methods:{
change_color1(){
this.myStyle1.backgroundColor = 'green'
},
change_color2(){
this.myStyle1.backgroundColor = 'red'
},
change_color3(){
this.myStyle1.backgroundColor = 'blue'
},
}
})
</script>
</html>
点击变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.wrap {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<div class="wrap" :style="{backgroundColor: color}" @click="changeColor"></div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
color: 'black',
count: 0,
colorArr: ['cyan', 'pink', 'green'] // 保存颜色的映射关系
},
methods: {
changeColor() {
let n = this.count++;
this.color = this.colorArr[n % this.colorArr.length];
}
}
})
</script>
</html>
自动旋转变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid black;
border-radius: 50%;
overflow: hidden;
position: relative;
}
.b1 {
background-color: red;
position: absolute;
}
.b2 {
background-color: green;
position: absolute;
}
.left {
width: 100px;
height: 200px;
left: 0;
}
.right {
width: 100px;
height: 200px;
right: 0;
}
.top {
width: 200px;
height: 100px;
top: 0;
}
.buttom {
width: 200px;
height: 100px;
bottom: 0;
}
</style>
</head>
<body>
<div id="app">
<div class="box" @click="roll">
<div class="b1" :class="c1"></div>
<div class="b2" :class="c2"></div>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
count: 1,
c1: 'l',
c2: 'r',
c1Arr: ['left', 'top', 'right', 'buttom'],
c2Arr: ['right', 'buttom', 'left', 'top']
},
methods: {
roll() {
let n = this.count++;
this.c1 = this.c1Arr[n % 4];
this.c2 = this.c2Arr[n % 4];
}
}
});
// 利用定时器自动旋转图像
setInterval(function () {
app.roll();
}, 500)
</script>
</html>
