Vue 数组控制CSS

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <title>vue 数组控制 CSS</title>
    <style>
        div.pan {
            text-align: center;
            margin: 10px 0px;
        }

        div.showCSS {
            display: inline-block;
            height: 60px;
            width: 200px;
            vertical-align: middle;
            background-color: #f0f0f0;
            /* 变换启用过度 */
            transition: transform 2s linear;
        }

        div.cssblue {
            background-color: blue;
        }

        div.cssborder {
            border: red solid 2px;
        }

        /* 倾斜 */
        div.cssskew {
            transform: skew(30deg,10deg);
        }

        /* 旋转 */
        div.cssrotate {
            transform: rotateX(360deg);
        }

        div.ctrbutton {
            display: inline-block;
            min-height: 10px;
            vertical-align: middle;
            user-select: none;
            border: black solid 2px;
            border-radius: 4px;
            padding: 4px;
        }

        div.ctrbutton:hover {
            cursor: pointer;
            background-color: rgb(207, 209, 211);
            padding: 6px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="pan">vue 数组控制 CSS</div>
        <div class="pan">
            <!-- 数组控制 CSS 样式的展示 -->
            <div class="showCSS" v-bind:class="[cssblue,cssborder,cssskew,cssrotate]"></div>
        </div>
        <div class="pan">
            <div class="ctrbutton" @click="Oncssblue">蓝底</div>
            <div class="ctrbutton" @click="Oncssborder">红边</div>
            <div class="ctrbutton" @click="Oncssskew">倾斜</div>
            <div class="ctrbutton" @click="Oncssrotate">旋转</div>
        </div>
    </div>
</body>
<script>
    var vm = new Vue(
        {
            el: '#app',
            data: {
                cssblue: null,
                cssborder: null,
                cssskew: null,
                cssrotate:null
            },
            methods: {
                Oncssblue() {
                    console.log('切换蓝底')
                    if (this.cssblue) {
                        this.cssblue = null
                    } else {
                        this.cssblue = 'cssblue'
                    }
                },
                Oncssborder() {
                    console.log('切换红边')
                    if (this.cssborder) {
                        this.cssborder = null
                    } else {
                        this.cssborder = 'cssborder'
                    }
                },
                Oncssskew() {
                    console.log('切换倾斜')
                    this.cssrotate = null
                    if (this.cssskew) {
                        this.cssskew = null
                    } else {
                        this.cssskew = 'cssskew'
                    }
                },
                Oncssrotate() {
                    console.log('切换旋转')
                    this.cssskew = null
                    if (this.cssrotate) {
                        this.cssrotate = null
                    } else {
                        this.cssrotate = 'cssrotate'
                    }
                }
            },
        }
    )
</script>

</html>
猜你喜欢
