图框变色 实现
目录
1、有红、黄、蓝三个按钮，以及一个200*200的矩形框，点击各色按钮可使矩形框变成对应的颜色
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="d1">
<div>
<button @click="changeColor('red')">红</button>
<button @click="changeColor('yellow')">黄</button>
<button @click="changeColor('blue')">蓝</button>
</div>
<div class="box" :style="{backgroundColor: bgColor}"></div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#d1',
data:{
bgColor:'black'
},
methods:{
changeColor(color){
this.bgColor=color;
}
}
})
</script>
</html>
2、有一个200*200的矩形框，点击框本身，记录点击次数，并使框的颜色根据点击次数变化，1次为红色，2为黄色，3为绿色，4为红色，5为黄色，依次循环
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.wrap{
width: 200px;
height: 200px;
/*background-color: black;*/
color: white;
font: bold 50px/200px 'STSong';
user-select: none;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<div id="d1">
<p class="wrap" @click="actionFn" :style="{backgroundColor:bgColor}">{{ count }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#d1',
data:{
count:0,
bgColor:'black',
colorArr:['pink','red','green']
},
methods:{
actionFn(){
this.count ++;
this.bgColor = this.colorArr[this.count % 3]
}
}
})
</script>
</html>
3、实现：一个圆形框，初始时左半边红色，右半边绿色，点击一次就变成上红下绿，再点击一次就右红左绿，再点击一次就下红上绿，依次顺时针变化
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.wrap{
width: 200px;
height: 200px;
border: 2px solid black ;
border-radius: 50%;
overflow: hidden;
margin: 50px auto ;
position: relative;
}
.red, .green{
width: 100px;
height: 200px;
float: left;
position: absolute;
}
.red{background-color: red}
.green{background-color: green}
.l{
width: 100px;
height: 200px;
left:0;
}
.t{
width: 200px;
height: 100px;
top: 0;
}
.r{
width: 100px;
height: 200px;
right:0;
}
.b{
width: 200px;
height: 100px;
bottom:0;
}
</style>
</head>
<body>
<div id="d1" >
<div class="wrap" @click="actionFn">
<div class="red" :class="red_class"></div>
<div class="green" :class="green_class"></div>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#d1',
data:{
count:0,
red_class:'l',
green_class:'r',
red_arr:['l','t','r','b'],
green_arr:['r','b','l','t']
},
methods:{
actionFn(){
this.count ++;
this.red_class = this.red_arr[this.count % 4];
this.green_class = this.green_arr[this.count % 4]
}
}
})
</script>
</html>
