有 红、黄、蓝 三个按钮，以及一个200x200矩形框box，点击不同的按钮，box的颜色会被切换为指定的颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!-- <style>-->
<!-- /*d1 {*/-->
<!-- /* 200px;*/-->
<!-- /* height: 200px;*/-->
<!-- /* background-color: darkred;*/-->
<!-- /*}*/-->
<!-- /*d2 {*/-->
<!-- /* 200px;*/-->
<!-- /* height: 200px;*/-->
<!-- /* background-color: darkkhaki;*/-->
<!-- /*}*/-->
<!-- /*d3 {*/-->
<!-- /* 200px;*/-->
<!-- /* height: 200px;*/-->
<!-- /* background-color: darkblue;*/-->
<!-- /*}*/-->
<!-- </style>-->
</head>
<body>
<div id="app">
<form action="" style="margin: 20px;">
<p id="box" @click="f1" :style="{w,height:h, backgroundColor:bgc }"></p>
<hr>
<input type="button" value="红" @click="f1($event,'darkred')">
<input type="button" value="黄" @click="f1($event,'darkkhaki')">
<input type="button" value="蓝" @click="f1($event,'darkblue')">
</form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data:{
w:'200px',
h:'200px',
bgc:'white'
},
methods:{
f1(ev,argv){
this.bgc=argv
}
// f2(){
// #box.class='d2'
// },
// f3(){
// #box.class='d3'
// }
}
})
</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>
.cleard {
background-color: deeppink;
background-color: cornflowerblue;
}
</style>
</head>
<body>
<div id="app">
<form action="" style="margin: 20px;">
<p id="box" @click="f1" :style="{w,height:h, backgroundColor:bgc }"></p>
</form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let x = 0;
new Vue({
el: '#app',
data: {
w: '200px',
h: '200px',
bgc: 'white'
},
methods: {
f1() {
x += 1;
if (x == 1) {
this.bgc = 'deeppink'
} else if (x == 2) {
this.bgc = 'darkgreen'
} else if (x == 3) {
this.bgc = 'cornflowerblue';
x = 0
}
}
}
})
</script>
</html>
如图：图形初始左红右绿，点击一下后变成上红下绿，再点击变成右红左绿，再点击变成下红上绿，依次类推
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<form action="" style="margin: 20px;">
<p @click="f1" :style="{w,height:h, background:bgc }"></p>
</form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let x = 0;
new Vue({
el: '#app',
data: {
w: '200px',
h: '200px',
bgc: 'linear-gradient(to top, red 50%, green 50%)',
},
methods: {
f1() {
x += 1;
if (x == 1) {
this.bgc = 'linear-gradient(20deg, red,orange,yellow,green,blue,indigo,violet)'
} else if (x == 2) {
this.bgc = 'linear-gradient(40deg, red,orange,yellow,green,blue,indigo,violet)'
} else if (x == 3) {
this.bgc = 'linear-gradient(60deg, red,orange,yellow,green,blue,indigo,violet)'
} else if (x == 4) {
this.bgc = 'linear-gradient(80deg, red,orange,yellow,green,blue,indigo,violet)'
} else if (x == 5) {
this.bgc = 'linear-gradient(100deg, red,orange,yellow,green,blue,indigo,violet)'
} else if (x == 6) {
this.bgc = 'linear-gradient(120deg, red,orange,yellow,green,blue,indigo,violet)'
} else if (x == 7) {
this.bgc = 'linear-gradient(140deg, red,orange,yellow,green,blue,indigo,violet)'
} else if (x == 8) {
this.bgc = 'linear-gradient(160deg, red,orange,yellow,green,blue,indigo,violet)'
} else if (x == 9) {
this.bgc = 'linear-gradient(180deg, red,orange,yellow,green,blue,indigo,violet)'
} else if (x == 10) {
this.bgc = 'linear-gradient(200deg, red,orange,yellow,green,blue,indigo,violet)'
} else if (x == 11) {
this.bgc = 'linear-gradient(220deg, red,orange,yellow,green,blue,indigo,violet)'
} else if (x == 12) {
this.bgc = 'linear-gradient(240deg, red,orange,yellow,green,blue,indigo,violet)'
} else if (x == 13) {
this.bgc = 'linear-gradient(260deg, red,orange,yellow,green,blue,indigo,violet)'
} else if (x == 14) {
this.bgc = 'linear-gradient(280deg, red,orange,yellow,green,blue,indigo,violet)'
} else if (x == 15) {
this.bgc = 'linear-gradient(300deg, red,orange,yellow,green,blue,indigo,violet)'
} else if (x == 16) {
this.bgc = 'linear-gradient(320deg, red,orange,yellow,green,blue,indigo,violet)'
} else if (x == 17) {
this.bgc = 'linear-gradient(340deg, red,orange,yellow,green,blue,indigo,violet)'
} else if (x == 18) {
this.bgc = 'linear-gradient(360deg, red,orange,yellow,green,blue,indigo,violet)';
x = 0
}
}
}
})
</script>
</html>