根据按钮颜色改变正方形颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d1 {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="change_color">
<button @click="f1">蓝色</button>
<button @click="f2">红色</button>
<button @click="f3">绿色</button>
<div class="d1" :style="{backgroundColor:bgc}"></div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#change_color',
data: {
bgc:'red'
},
methods: {
f1(){
console.log(this);
this.bgc='blue'
},
f2(){
this.bgc='red'
},
f3(){
this.bgc='green'
}
}
})
</script>
</html><!DOCTYPE html>
<html lang="en">
