ジョブ12.16

図1に示すように、赤、黄、青ボタン、および矩形枠ボックス200×200は、別のボタンをクリックし、ボックスの色は、指定色に切り替えられます

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            <!--需求：当前点击者高亮-->
            <button @click="changeColor('red')">红</button>
            <button @click="changeColor('yellow')">黄</button>
            <button @click="changeColor('blue')">蓝</button>
        </div>
        <div class="box" :style="{backgroundColor: bgColor}"></div>
        <!--(div>button*3)+.box-->
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            bgColor: 'black'
        },
        methods: {
            changeColor(color) {
                this.bgColor = color;
            }
        }
    })
</script>
</html>

2、200×200の長方形ラップがあり、レコードクリックをラップ自体をクリックして、それはピンク色のためのラップ後であれば、緑色が二回ラップで、シアン色として3回をラップ、4回にはピンク色をバックなど

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .wrap {
            width: 200px;
            height: 200px;
            /*background-color: black;*/
            color: white;
            font: bold 50px/200px 'STSong';
            text-align: center;
            user-select: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="wrap" @click="actionFn" :style="{backgroundColor: bgColor}">{{ count }}</div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            count: 0,
            bgColor: 'black',
            colorArr: ['cyan', 'pink', 'green']
        },
        methods: {
            actionFn() {
                this.count ++;
                this.bgColor = this.colorArr[this.count % 3]
            }
        }
    })
</script>
</html>

図3は、図：最初のパターンは、赤と緑の右、赤、緑、赤に赤左右クリックに緑色をクリックし、緑色にクリックなど左図にプログラムすることができ、自動的に回転し

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .wrap {
            border: 3px solid black;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            overflow: hidden;
            margin: 50px auto 0;
            position: relative;
        }
        .red, .green {
            width: 100px;
            height: 200px;
            position: absolute;
        }
        .red { background-color: red; }
        .green { background-color: green; }

        .l {
            width: 100px;
            height: 200px;
            left: 0;
        }
        .t {
            width: 200px;
            height: 100px;
            top: 0;
        }
        .r {
            width: 100px;
            height: 200px;
            right: 0;
        }
        .b {
            width: 200px;
            height: 100px;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="wrap" @click="actionFn">
            <div class="red" :class="red_class"></div>
            <div class="green" :class="green_class"></div>
        </div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            count: 0,
            red_class: 'l',
            green_class: 'r',
            red_arr: ['l', 't', 'r', 'b'],
            green_arr: ['r', 'b', 'l', 't'],
        },
        methods: {
            actionFn() {
                this.count ++;
                this.red_class = this.red_arr[this.count % 4];
                this.green_class = this.green_arr[this.count % 4];
            }
        }
    })
</script>
</html>

おすすめ