第一题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
<p :style="myStyle"></p>
<button :style="{backgroundColor:co1}" @click="f1">变红</button>
<button :style="{backgroundColor:co2}" @click="f2">变黄</button>
<button :style="{backgroundColor:co3}" @click="f3">变蓝</button>
</div>
<script src="vue/vue.js"></script>
<script>
new Vue({
el: '#d1',
data: {
co1: 'red',
co2: 'yellow',
co3: 'blue',
myStyle: {
width: '200px',
height: '200px',
background: 'red'
}
},
methods: {
f1() {
this.myStyle.background = this.co1
},
f2() {
this.myStyle.background = this.co2
},
f3() {
this.myStyle.background = this.co3
},
}
})
</script>
</body>
</html>
第二题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
<p class="wrap" :style="myStyle" @click="f1">{{ count }}</p>
</div>
<script src="vue/vue.js"></script>
<script>
new Vue({
el:"#d1",
data:{
counter:0,
co1:'pink',
co2:'green',
co3:'cyan',
myStyle:{
width:'200px',
height:'200px',
backgroundColor:'red'
}
},
methods:{
f1(){
this.count += 1;
if (this.count % 3 === 1) {
this.myStyle.backgroundColor = this.co1
} else if (this.count % 3 === 2) {
this.myStyle.backgroundColor = this.co2
} else {
this.myStyle.backgroundColor = this.co3
}
}
}
})
</script>
</body>
</html>
