作业
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
200px;
height: 200px;
}
</style>
</head>
<body>
<div id="app">
<p class="box" :style="{backgroundColor: bgc}"></p>
<input type="button" value="红" @click="c_red">
<input type="button" value="黄" @click="c_ye">
<input type="button" value="蓝" @click="c_bl">
</div>
</body>
<script src="vue/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
bgc:'white'
},
methods:{
c_red(){
this.bgc = 'red'
},
c_ye(){
this.bgc = 'yellow'
},
c_bl(){
this.bgc = 'blue'
},
}
})
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#wrap {
200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<div id="wrap" :style="{backgroundColor: bgc}" @click="change_c"></div>
<span>{{ count }}</span>
</div>
</body>
<script src="vue/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
bgc:'blank',
count:0,
colorArr:['pink','green','cyan']
},
methods:{
change_c(){
let n = this.count++;
this.bgc = this.colorArr[n % this.colorArr.length]
}
}
})
</script>
</html>