VUE小练习(按钮颜色，数组映射)
Posted michealjy
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VUE小练习(按钮颜色，数组映射)相关的知识，希望对你有一定的参考价值。
VUE小练习(按钮颜色，数组映射)
## 1.有红、黄、蓝三个按钮，以及一个200x200矩形框box, 点击不同的按钮，box的颜色会被切换成指定的颜色
'''
解法一：我本来的思路，把三个按钮绑定到一个div中，然后通过DOM操作，利用方法拿到当前event，把当前标签的父标签的background换成相应的颜色，是很笨的方法。代码比较冗余，但是是我自己的思路，可以用css样式做一些技巧
'''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#app {
width: 200px;
height: 200px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div id="app">
<button @click="fun($event)">红色</button>
<button @click="fun1($event)">蓝色</button>
<button @click="fun2($event)">黄色</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
methods: {
fun(e){
// e.target.style.backgroundColor = "#"+Math.floor(Math.random()*0xffffff).toString(16);
e.currentTarget.parentElement.style.backgroundColor = 'red';
},
fun1(e) {
e.currentTarget.parentElement.style.backgroundColor = 'blue';
},
fun2 (e){
e.currentTarget.parentElement.style.backgroundColor = 'yellow';
}
}
});
</script>
</html>
'''
解法二：三个不同的按钮，可以通过绑定同一点击事件，传入不同的参数，来表示不同的按钮。有几个点要注意
'''
"""
1.p标签把按钮包起来，box区域紧接着在下一个div中，可以实现换行。
2.box区域用一个属性指令，把background_color单独设置一个变量。
3.methods中绑定的fn方法，点击时，把颜色color进行替换。
"""
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>作业1</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<p>
<button @click="fn('red')">红</button>
<button @click="fn('yellow')">黄</button>
<button @click="fn('blue')">蓝</button>
</p>
<div class="box" :style="{backgroundColor: color}"></div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
color: 'red'
},
methods: {
fn(color) {
this.color = color;
}
}
})
</script>
</html>
## 2.有一个200x200的矩形框wrap，点击wrap本身，记录点击次数，如果是1次wrap为pink色，2次wrap为green色，3次wrap为cyan色，4次重新回到pink色
'''
思路一：
想法和上面那道题是一样的，就是点击事件中，对当前点击次数进行判断，对3取余，然后用DOM操作，对当前的背景颜色进行更改。
'''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#wrap {
width: 200px;
height: 200px;
background-color: peachpuff;
}
</style>
</head>
<body>
<div id="wrap" @click="fun($event)">
<label for="wrap">你一共点击了{{ count }}次</label>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
let qpp = new Vue({
el: '#wrap',
data: {count: 0,},
methods:{fun(e) {
this.count ++;
if (this.count % 3 === 1){
e.target.style.backgroundColor = 'pink';
} else if (this.count % 3 === 2){
e.target.style.backgroundColor = 'green';
}else {
e.target.style.backgroundColor = 'cyan';
}
},}
})
</script>
</html>
'''
思路二：
1.对wrap标签绑定一个属性事件（背景颜色）和一个点击事件（方法用于改变颜色属性）
2.用一个数组完成点击次数和颜色的映射，取余之后对颜色进行赋值替换
'''
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>作业2</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>
## 3.如图，图形初始左红右绿，点击一下后变成上红下绿，再点击变成右红左绿，再点击变成上绿下红，以此类推。
'''
思路：
1.父标签定位好，是一个圆，然后两个矩形拼成父标签组成的圆，然后子标签只渲染颜色，一个红一个绿色，这样给四个不同方位的矩形样式。
2.给父标签绑定点击事件，然后子标签绑定属性事件，两个属性给的实例是用元组拼凑成的颜色组合，这样在点击方法里面就可以根据点击的次数，对颜色组合进行控制，从而实现需求。
'''
<!DOCTYPE html>
<html lang="zh">
<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;
}
.l {
width: 100px;
height: 200px;
left: 0;
}
.r {
width: 100px;
height: 200px;
right: 0;
}
.t {
width: 200px;
height: 100px;
top: 0;
}
.b {
width: 200px;
height: 100px;
bottom: 0;
}
</style>
</head>
<body>
<div id="app">
<div class="box" @click="clickAction">
<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: ['l', 't', 'r', 'b'],
c2Arr: ['r', 'b', 'l', 't']
},
methods: {
clickAction() {
let n = this.count ++;
this.c1 = this.c1Arr[n % 4];
this.c2 = this.c2Arr[n % 4];
}
}
});
## 下面这句就是加一个定时器，然后可以直接调用点击事件，也可以自己写点击事件，实现圆饼的旋转特效。
// setInterval(function () {
// // let n = app.count ++;
// // app.c1 = app.c1Arr[n % 4];
// // app.c2 = app.c2Arr[n % 4];
// app.clickAction();
// }, 500)
</script>
</html>
以上是关于VUE小练习(按钮颜色，数组映射)的主要内容，如果未能解决你的问题，请参考以下文章