Vue class样式与style样式

Vue样式

绑定class样式

bind字符串形式
bind对象形式
arr数组形式

内联样式

styleObj对象
styleArr数组

demo

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="../lib/vue.js"></script>

<style>
    .base {
        color: mediumpurple;
    }

    .fz26 {
        font-size: 26px;
    }

    .fz14 {
        font-size: 14px;
    }

    .fw100 {
        font-weight: 100;
    }

    .red {
        color: red;
    }
</style>

<body>
    <div id="root">
        <!-- Vue class样式 -->
        <h1 class="base" :class="classStyle.classObj.class1">class样式-obj-字符串值形式</h1>
        <h1 class="base" :class="classStyle.classObj2">class样式-obj-布尔值形式</h1>
        <h1 class="base" :class="classStyle.classArr">class样式-Arr形式</h1>
        <!-- Vue 内联样式 -->
        <h1 class="base" :style="styleCss">内联样式</h1>
        <h1 class="base" :style="styleCssArr">内联样式-arr形式</h1>
    </div>
    <script>
        const vm = new Vue({
            el: "#root",
            data: {
                classStyle: {
                    classObj: { class1: 'fz26', class2: 'fz14' },
                    classObj2: { fz26: true, fz15: false, red: true },
                    classArr: ['fz26', 'fw100'],
                },
                styleCss: {
                    fontSize: '40px',
                    color: 'green'
                },
                styleCssArr: [
                    {
                        fontSize: '40px',
                        color: 'green'
                    }
                ]
            }
        })
    </script>
</body>

</html>
posted @ 2022-01-31 19:48  IslandZzzz  阅读(104)  评论(0)  编辑  收藏  举报