1、有红、黄、蓝三个按钮，以及一个200 X 200矩形框box，点击不同的按钮，box就会被切换为指定的颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d1 {
200px;
height: 200px;
}
</style>
</head>
<body>
<div id="app">
<div class="d1" :style="{backgroundColor: bgc}"></div>
<br>
<button @click="f1">红色</button>
<button @click="f2">黄色</button>
<button @click="f3">蓝色</button>
</div>
</body>
<script src="vue/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
bgc: 'red'
},
methods: {
f1 () {
this.bgc = 'red'
},
f2 () {
this.bgc = 'yellow'
},
f3 () {
this.bgc = 'blue'
}
}
})
</script>
2、有一个200X200矩形框wrap，点击wrap本身，记录点击次数，如果是1次wrap为pink色，2次wrap为green色，3次wrap为cyan色，4次重新回到pink色，依次类推
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<div id="app">
<button :style="{w,height:h,backgroundColor:color}" @click="changeColor">{{ wrap }}</button>
<p>点击的次数：{{ num }}</p>
</div>
<script src="vue/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
wrap: 'wrap框',
w: '200px',
h: '200px',
color: 'white',
num: 0,
colorArr: ['pink', 'green', 'cyan'],
},
methods: {
changeColor() {
let n = this.num ++;
this.color = this.colorArr[n % this.colorArr.length];
}
}
})
</script>
</html>