day65 作业

作业1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
     <p :style="myStyle"></p>
     <button @click="f1">红</button>
     <button @click="f2">黄</button>
     <button @click="f3">蓝</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            myStyle:{
                width:'200px',
                height:'200px',
                backgroundColor:'black'
            }
        },
        methods:{
            f1(){
                this.myStyle.backgroundColor='red'
            },
            f2(){
                this.myStyle.backgroundColor='yellow'
            },
            f3(){
                this.myStyle.backgroundColor='blue'
            }
        }
    })
</script>
</html>

作业2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
         <p :style="myStyle" @click="f1"></p>
</div>

</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            num:0,
            myStyle:{
                width:'200px',
                height:'200px',
                backgroundColor:'black'
            }
        },
        methods:{
            f1(){
                this.num+=1
                if (this.num%3==1){
                    this.myStyle.backgroundColor='pink'
                }else if(this.num%3==2){
                    this.myStyle.backgroundColor='green'
                }else{
                    this.myStyle.backgroundColor='cyan'
                }
            }
        }

    })
</script>
</html>

作业3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>




</head>
<body>
<div id="app">
    <div :style="myStyle2" @click="f1">
      <div :style="myStyle" ></div>
      <div :style="myStyle1"></div>
    </div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            num:0,
            myStyle:{
                width:'50px',
                height:'100px',
                backgroundColor:'red',
                borderRadius:'50px 0 0 50px',
                float:'left'
            },
            myStyle1:{
                width:'50px',
                height:'100px',
                backgroundColor:'yellow',
                borderRadius:'0 50px 50px 0',
                float:'left'
            },
            myStyle2:{
                position:'fixed',
            },

        },
        methods:{
            f1(){
               this.num+=1
                if (this.num%4==1){
                   this.myStyle.width='100px';
                   this.myStyle1.width='100px';
                   this.myStyle.height='50px';
                   this.myStyle1.height='50px';
                   this.myStyle.borderRadius='50px 50px 0 0';
                   this.myStyle1.borderRadius='0 0 50px 50px'
                    this.myStyle.float='none'
                    this.myStyle1.float='none'
                }else if (this.num%4==2){
                   this.myStyle.width='50px';
                   this.myStyle1.width='50px';
                   this.myStyle.height='100px';
                   this.myStyle1.height='100px';
                   this.myStyle.borderRadius='50px 0 0 50px';
                   this.myStyle1.borderRadius='0 50px 50px 0'
                    this.myStyle.float='left'
                    this.myStyle1.float='left'
                    this.myStyle.backgroundColor='yellow'
                    this.myStyle1.backgroundColor='red'
                }else if (this.num%4==3){
                    this.myStyle.width='100px';
                   this.myStyle1.width='100px';
                   this.myStyle.height='50px';
                   this.myStyle1.height='50px';
                   this.myStyle.borderRadius='50px 50px 0 0';
                   this.myStyle1.borderRadius='0 0 50px 50px'
                    this.myStyle.float='none'
                    this.myStyle1.float='none'
                    this.myStyle.backgroundColor='yellow'
                    this.myStyle1.backgroundColor='red'
                }else{
                   this.myStyle.width='50px';
                   this.myStyle1.width='50px';
                   this.myStyle.height='100px';
                   this.myStyle1.height='100px';
                   this.myStyle.borderRadius='50px 0 0 50px';
                   this.myStyle1.borderRadius='0 50px 50px 0'
                    this.myStyle.float='left'
                    this.myStyle1.float='left'
                    this.myStyle.backgroundColor='red'
                    this.myStyle1.backgroundColor='yellow'
                }

        }
    }
    })
</script>
</html>
posted @ 2019-12-16 23:09  风啊风啊  阅读(64)  评论(0编辑  收藏  举报