作业
<!--1-->
<div id="app">
<div :style="div_style"></div>
<div>
<button v-on:click="changeColor('red')">{{ red }}</button>
<button v-on:click="changeColor('yellow')">{{ yellow }}</button>
<button v-on:click="changeColor('blue')">{{ blue }}</button>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
div_style: {
width: "200px",
height: "200px",
backgroundColor: "black"
},
red: '点击变红',
yellow: '点击变黄',
blue: '点击变蓝',
},
methods: {
changeColor(a) {
this.div_style.backgroundColor = a;
}
}
})
</script>
<!--2-->
<div id="app">
<div :style="div_style"></div>
<button v-on:click="changeColor">点击</button>
</div>
<script>
var index = 0
var colorList = ['red','yellow','blue']
new Vue({
el:'#app',
data: {
div_style: {
height: '90px',
width: '90px',
backgroundColor:'red',
},
// colorChange:['red', 'yellow','blue']
},
methods:{
changeColor() {
if (index != 2) {
index+=1
this.div_style.backgroundColor = colorList[index]
}else{
index = -1
};
}
}
})
</script>
<!--3-->
<div id="app">
<div :style="div_style"></div>
<button v-on:click="changeColor">点击</button>
</div>
<script>
new Vue({
el:'#app',
data: {
div_style: {
borderRadius: '50%',
height: '90px',
width: '90px',
borderLeft: 'solid red 45px',
borderRight: 'solid green 45px',
borderTop: '',
borderBottom: '',
},
},
methods:{
changeColor() {
if (this.div_style.borderTop == '') {
this.div_style.borderTop = this.div_style.borderLeft
this.div_style.borderBottom = this.div_style.borderRight
this.div_style.borderLeft = ''
this.div_style.borderRight = ''
}else{
this.div_style.borderLeft = this.div_style.borderBottom
this.div_style.borderRight = this.div_style.borderTop
this.div_style.borderTop = ''
this.div_style.borderBottom = ''
}
}
}
})
</script>