<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<div :style="{width:w,height:h,backgroundColor:bgc1}">
</div>
<button @click="red">红</button>
<button @click="yellow">黄</button>
<button @click="green">绿</button>
<hr>
<div :style="{width:w,height:h,backgroundColor:bgc2}" @click="c2"></div>
<hr>
<div :style="{width:w1,height:h1,borderRadius:br,border:b,borderColor:bc,transform:t}" @click="c3"></div>
<div :style="{width:w1,height:h1,borderRadius:br,border:b,borderColor:bc,transform:t}" @click="c4"></div>
</div>
</body>
<script>
var count = 0;
new Vue({
el: '#app',
data: {
w1: '0',
h1: '0',
br: '100px',
b: 'solid 100px',
bc: 'green green red red',
t: 'rotate(45deg)',
w: '200px',
h: '200px',
bgc1: 'black',
bgc2: 'black'
},
methods: {
red() {
this.bgc1 = 'red'
},
yellow() {
this.bgc1 = 'yellow'
},
green() {
this.bgc1 = 'green'
},
c2() {
count += 1;
if (count % 4 === 1) {
this.bgc2 = 'pink'
} else if (count % 4 === 2) {
this.bgc2 = 'green'
} else if (count % 4 === 3) {
this.bgc2 = 'cyan'
} else if (count % 4 === 4) {
this.bgc2 = 'pink'
}
},
c3() {
count += 1;
console.log(count%4)
if (count % 4 === 1) {
this.t = 'rotate(45deg)';
} else if (count % 4 === 2) {
this.t = 'rotate(135deg)';
} else if (count % 4 === 3) {
this.t = 'rotate(225deg)'
}else if (count % 4 === 0) {
this.t = 'rotate(315deg)'
}
}
}
})
</script>
</html>