Job one:
1, red, yellow, and blue buttons, and a rectangular frame of 200 * 200, click on the button to make the color becomes a color corresponding to the rectangular frame
<!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, a rectangular frame of 200 * 200, click on the box itself, recording the number of clicks, and the color varies depending on the number of clicks frame, 1 is red, yellow 2, 3 green, red 4, yellow 5, followed by cycle
<!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>