<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="js/vue.js"></script>
<style>
.d1 {
width: 200px;
height: 200px;
}
.d2{
border-radius: 50%;
}
</style>
<title>Document</title>
</head>
<body>
<div id="app01">
<div class="d1" :style="{backgroundColor: boxColor}"></div>
<input v-on:click='changeColor("red")' type="button" value="红">
<input v-on:click='changeColor("yellow")' type="button" value="黄">
<input v-on:click='changeColor("blue")' type="button" value="蓝">
</div>
<div id='app02'>
<div class="d1" :style="{backgroundColor: boxColor}" v-on:click='action'></div>
</div>
</body>
<script>
new Vue({
el: '#app01',
data: {
boxColor:'blue',
},
methods: {
changeColor (color) {
this.boxColor=color;
}
}
})
new Vue({
el: '#app02',
data: {
boxColor:'blue',
colors: ['pink', 'green', 'cyan'],
i: 0,
},
methods: {
action () {
this.boxColor=this.colors[this.i % 3];
this.i = this.i + 1;
}
}
})
</script>
</html>
