67 作业


<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #round {
            width: 200px;
            height: 200px;
            border: solid black 2px;
            border-radius: 50%;
        }

        .c1 {
            background-color: red;
        }

        .c2 {
            background-color: yellow;
        }

        .c3 {
            background-color: green;
        }

        .c4 {
            background-color: pink;
        }

        .c5 {
            background-color: cyan;
        }

        table {
            width: 400px;
        }

    </style>
</head>
<body>

<div id="idVue">


    <!--作业1-->
    <div :class="vClass1" name="box" style="width: 200px;height: 200px;border: solid black 2px;"></div>
    <br>
    <button v-on:click="redClick">{{ red }}</button>
    <button v-on:click="yellowClick">{{ yellow }}</button>
    <button v-on:click="greenClick">{{ green }}</button>
    <br>
    <hr>
    <br>

    <!--作业2-->
    <div :class="vClass2" @click="countClick" name="wrap"
         style="width: 200px;height: 200px;border: solid black 2px;"></div>
    <br>
    <hr>
    <br>

    <!--作业3-->
    <div style="position: relative;width: 200px;height: 200px;overflow: hidden;border: solid black 2px;border-radius: 50%">
        <div :style="d1"></div>
        <div :style="d2"></div>
    </div>

    <button @click="roundChange">变换形态</button>
    
</div>

</body>

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    new Vue({
        el: '#idVue',
        data: {
            red: '按下变红',
            yellow: '按下变黄',
            green: '按下变绿',
            vClass1: '',
            vClass2: '',
            count: 0,
            d1: {
                backgroundColor: 'red',
                width: '50%',
                height: '100%',
                float: 'left',
            },
            d2: {
                backgroundColor: 'green',
                width: '50%',
                height: '100%',
                float: 'left',
            },
        },
        methods: {
            redClick() {
                this.vClass1 = 'c1'
            },
            yellowClick() {
                this.vClass1 = 'c2'
            },
            greenClick() {
                this.vClass1 = 'c3'
            },
            countClick() {
                this.count += 1;
                if (this.count % 3 == 1) {
                    this.vClass2 = 'c4';
                } else if (this.count % 3 == 2) {
                    this.vClass2 = 'c3';
                } else if (this.count % 3 == 0) {
                    this.vClass2 = 'c5';
                }
            },
            roundChange() {
                if (this.count % 4 == 0) {
                    this.d1 = {
                        backgroundColor: 'red',
                        width: '100%',
                        height: '50%',
                    };
                    this.d2 = {
                        backgroundColor: 'green',
                        width: '100%',
                        height: '50%',
                    };
                } else if (this.count % 4 == 1) {
                    this.d1 = {
                        backgroundColor: 'green',
                        width: '50%',
                        height: '100%',
                        float: 'left',
                    };
                    this.d2 = {
                        backgroundColor: 'red',
                        width: '50%',
                        height: '100%',
                        float: 'left',
                    };
                } else if (this.count % 4 == 2) {
                    this.d1 = {
                        backgroundColor: 'green',
                        width: '100%',
                        height: '50%',
                    };
                    this.d2 = {
                        backgroundColor: 'red',
                        width: '100%',
                        height: '50%',
                    };
                } else if (this.count % 4 == 3) {
                    this.d1 = {
                        backgroundColor: 'red',
                        width: '50%',
                        height: '100%',
                        float: 'left',
                    };
                    this.d2 = {
                        backgroundColor: 'green',
                        width: '50%',
                        height: '100%',
                        float: 'left',
                    };
                }

                this.count += 1;
            }
        }


    })

</script>
</html>
猜你喜欢
