day67-VueWork

作业

<!--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>