VUEday01


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: black;
        }
        .red{
            background-color: red;
        }
        .yel{
            background-color: yellow;
        }
        .blue{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="d1">
        <div :class="['box',{red:is_true,yel:is_true1,blue:is_true2}]" ></div>
        <button @click="f1">{{red}}</button>
        <button @click="f2">{{yel}}</button>
        <button @click="f3">{{blue}}</button>
    </div>
    
</body>
<script src="bootstrap-3.3.7-dist/vue.min.js"></script>
<script>
    new Vue({
        el:'#d1',
        data:{
            is_true:false,
            is_true1:false,
            is_true2:false,
            red:'红色',
            yel:'黄色',
            blue:'蓝色',
        },
        methods:{
            f1(){
            this.is_true=1;
            this.is_true1=0;
            this.is_true2=0;
            },
            f2(){
            this.is_true1=1;
            this.is_true=0;
            this.is_true2=0;

            },
            f3(){
            this.is_true2=1;
            this.is_true1=0;
            this.is_true=0;
            }
        }

    });

</script>
</html>

### 作业二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: black;
        }
        .pink{
            background-color: pink;
        }
        .green{
            background-color: green;
        }
        .cyan{
            background-color: cyan;
        }
    </style>
</head>
<body>

   <div id="d2">
      <div :class="['box',{pink:is_true,green:is_true1,cyan:is_true2}]"     @click="f1($event)"></div>
    </div>
</body>
<script src="bootstrap-3.3.7-dist/vue.min.js"></script>
<script>
    new Vue({
        el:'#d2',
        data:{
        is_true:false,
        is_true1:false,
        is_true2:false,
        },
        methods: {
        f1(e){
            let time=1;
           if(e.detail===time){
              this.is_true = 1;
              this.is_true1 = 0;
              this.is_true2 = 0;
              console.log(time)
           }if(e.detail===time+1){
              this.is_true = 0;
              this.is_true1 = 1;
              this.is_true2 = 0;
            }if (e.detail===time+2) {
              this.is_true = 0;
              this.is_true1 = 0;
              this.is_true2 = 1;

            }

        }
        }
    })
</script>
</html>