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>
