day 67 作业

  • 有红, 黄, 蓝三个按钮, 以及一个200X200px的矩形box, 点击不同的按钮, box的颜色会被切换为指定的颜色
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>

<body>
    <div id="d1">
        <p>
            <button @click="ck('red')">红</button>
            <button @click="ck('yellow')">黄</button>
            <button @click="ck('blue')">蓝</button>
        </p>

        <div class="box" :style="{backgroundColor: color}"></div>
    </div>
</body>
<script src="js/vue.js"></script>
</html>
<script>
    new Vue({
        el: '#d1',
        data: {
            color: 'red'
        },
        methods: {
            ck(color) {
                this.color = color;
            }
        }
    })
</script>
  • 一个200X200px的矩形box, 点击box本身, 记录点击次数, 1次box变为粉色, 2次变为绿, 3次变为蓝色, 4次重新回到粉色, 依次类推
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>

</head>
<style>
    .wrap {
        width:200px;
        height:200px;
        background-color:red;
    }
</style>
<body>
<div id="d1">

   <div class="wrap" :style="{backgroundColor:color}" @click="changeColor"></div>

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

<script>
   new Vue ({
       e1: '#d1',
       data: {
           color: 'black',
           count:0,
           colorTrans: ['pink','cyan','green']
       },
       method: {
           changeColor(){
               let i = this.count+1;
               this.color = this.colorTrans;
           }
       }
   })
</script>


</body>
</html>
posted @ 2019-12-17 08:39  colacheng  阅读(110)  评论(0编辑  收藏  举报
Live2D