'''
1.有 红、黄、蓝 三个按钮，以及一个200x200矩形框box，点击不同的按钮，box的颜色会被切换为指定的颜色
'''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d1 {
width: 200px;
height: 200px;
background-color: black;
}
.d2 {
width: 200px;
height: 200px;
background-color: red;
}
.d3 {
width: 200px;
height: 200px;
background-color: yellow;
}
.d4 {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id="app">
<p v-on:click="pClick(1)">红</p>
<p v-on:click="pClick(2)">黄</p>
<p v-on:click="pClick(3)">蓝</p>
<p :class="c1"></p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
c1: 'd1',
c2: 'd2',
c3: 'd3',
c4: 'd4',
},
methods: {
pClick: function (arg) {
if (arg == '1') {
app.c1 = app.c2
}
if (arg == '2') {
app.c1 = app.c3
}
if (arg == '3') {
console.log(arg)
app.c1 = app.c4
}
}
}
})
</script>
</html>
'''
有一个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>
<style>
.d1 {
width: 200px;
height: 200px;
background-color: black;
}
.d2 {
width: 200px;
height: 200px;
background-color: pink;
}
.d3 {
width: 200px;
height: 200px;
background-color: green;
}
.d4 {
width: 200px;
height: 200px;
background-color: cyan;
}
</style>
</head>
<body>
<div id="app">
<p>{{ count }}</p>
<p :class="c1" v-on:click="pClick"></p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
count: 0,
res: 0,
c1: 'd1',
c2: 'd2',
c3: 'd3',
c4: 'd4',
},
methods: {
pClick: function () {
app.count = app.count + 1;
app.res = app.res + 1;
if (app.res == 1) {
app.c1 = app.c2
}
if (app.res == 2) {
app.c1 = app.c3
}
if (app.res == 3) {
app.c1 = app.c4;
app.res = 0;
}
}
}
})
</script>
</html>
