作业一：
1、有红、黄、蓝三个按钮，以及一个200*200的矩形框，点击各色按钮可使矩形框变成对应的颜色
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="d1">
<div>
<button @click="changeColor('red')">红</button>
<button @click="changeColor('yellow')">黄</button>
<button @click="changeColor('blue')">蓝</button>
</div>
<div class="box" :style="{backgroundColor: bgColor}"></div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#d1',
data:{
bgColor:'black'
},
methods:{
changeColor(color){
this.bgColor=color;
}
}
})
</script>
</html>2、有一个200*200的矩形框，点击框本身，记录点击次数，并使框的颜色根据点击次数变化，1次为红色，2为黄色，3为绿色，4为红色，5为黄色，依次循环
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.wrap{
width: 200px;
height: 200px;
/*background-color: black;*/
color: white;
font: bold 50px/200px 'STSong';
user-select: none;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<div id="d1">
<p class="wrap" @click="actionFn" :style="{backgroundColor:bgColor}">{{ count }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#d1',
data:{
count:0,
bgColor:'black',
colorArr:['pink','red','green']
},
methods:{
actionFn(){
this.count ++;
this.bgColor = this.colorArr[this.count % 3]
}
}
})
</script>
</html>