作业一：红黄蓝按钮切换颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.b1 {
width: 50px;
height: 50px;
background-color: red;
}
.b2 {
width: 50px;
height: 50px;
background-color: yellow;
}
.b3 {
width: 50px;
height: 50px;
background-color: blue;
}
</style>
</head>
<body>
<div id="d">
<input type="button" :class="[b1]" @click="c1">
<input type="button" :class="[b2]" @click="c2">
<input type="button" :class="[b3]" @click="c3">
<div :style="myStyle" :class="b4"></div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#d',
data:{
myStyle:{
width:'200px',
height:'200px',
backgroundColor: 'red'
},
b1:'b1',
b2:'b2',
b3:'b3',
},
methods:{
c1(){
this.myStyle.backgroundColor='red'
},
c2(){
this.myStyle.backgroundColor='yellow'
},
c3(){
this.myStyle.backgroundColor='blue'
},
}
})
</script>
</html>
作业二:依次点击图片，按照pink green cyan 颜色循环变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div :style="myStyle" class="b4" @click="d1" id="wrap" >{{ msg }}</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#wrap',
data:
{
myStyle:{
width:'200px',
height:'200px',
backgroundColor: 'red',
color:'red'
},
msg:0
},
methods:{
d1(){
this.msg+=1;
if (this.msg==1) {
this.myStyle.backgroundColor='pink';
this.myStyle.color='pink'
}else if(this.msg==2){
this.myStyle.backgroundColor='green';
this.myStyle.color='green'
}else if(this.msg==3){
this.myStyle.backgroundColor='cyan';
this.myStyle.color='cyan'
}else {
this.msg=0;
this.myStyle.backgroundColor='pink';
this.myStyle.color='pink'
}
}
}
})
</script>
</html>