day 65 作业

1

<script src="vue/vue.js"></script>

<div id="app">
    <form action="" style="margin: 20px;">
        <p @click="tag" :style="{ w,height: h, backgroundColor: bgc}"></p>
        <input type="button" value="红" @click="tag($event,'red')">
        <input type="button" value="黄" @click="tag($event,'yellow')">
        <input type="button" value="绿" @click="tag($event,'green')">
    </form>
</div>

<script>
    new Vue({
        el:'#app',
        data:{
            h: '200px',
            w: '200px',
            bgc: 'red'
            },
        methods:{
            tag (a,b) {
                this.bgc = b
            }
        }
    })
</script>

2

<div id="app">
    <form action="" style="margin: 20px;">
        <p @click="tag" :style="{ w,height: h, backgroundColor: bgc}"></p>
    </form>
</div>

<script>
    let num = 0;
    new Vue({
        el:'#app',
        data:{
            h: '200px',
            w: '200px',
            bgc: 'red'
            },
        methods:{
            tag () {
                num += 1;
                if (num==1){
                    this.bgc = 'pink'
                }else {if (num==2){
                    this.bgc = 'green'
                }else {
                    this.bgc = 'cyan';
                    num = 0
                }}
            }
        }
    })
</script>

3

<div id="app">
    <form action="" style="margin: 20px;">
        <p @click="tag" :style="{ w,height: h, background: bgc, borderRadius:rad}"></p>
    </form>
</div>

<script>
    let num = 0;
    let app = new Vue({
        el:'#app',
        data:{
            h: '200px',
            w: '200px',
            bgc: 'linear-gradient(to top, red 50%, green 50%)',
            rad: '50%'
            },
        methods:{
            tag () {
                num += 1;
                if (num==1){
                    this.bgc = 'linear-gradient(to top, red 50%, green 50%)'
                }else {if (num==2){
                    this.bgc = 'linear-gradient(to left, red 50%, green 50%)'
                }else {if (num==3) {
                    this.bgc = 'linear-gradient(to bottom,red  50%, green 50%)'
                }else {
                    this.bgc = 'linear-gradient(to right, red 50%, green 50%)';
                    num = 0
                }
                }}
            }
        }
    });
    function funcTest(){
    window.setInterval(app.tag,500);
}
    window.onload = funcTest;
</script>