VUE3 之 樣式綁定

1. 概述

老話說的好：腳踏實地，從小事做起。

 

言歸正傳，今天我們來聊聊 VUE3 的樣式綁定。

 

2. 樣式綁定

2.1 樣式例子

　　<style>
        /* 顏色 */
        .color-red {
            color: red;
        }
        /* 字體 */
        .font-size-25 {
            font-size: 25px;
        }
        /* 居中 */
        .center {
            text-align: center;
        }
    </style>

 

2.2 直接寫 class 的值

<body>
    <div id="myDiv"></div>
</body>
<script>

    const app = Vue.createApp({     // 創建一個vue應用實例

        template : '<div class="color-red">hello</div>'

    });

    // vm 就是vue應用的根組件
    const vm = app.mount('#myDiv');  // 綁定id為 myDiv 的元素

 

2.3 class 綁定字符串數據

<body>
    <div id="myDiv"></div>
</body>
<script>

    const app = Vue.createApp({     // 創建一個vue應用實例
        
        data() {
            return {
                myColor : "color-red"

            }
        },

        template : '<div :class="myColor">hello</div>' 

    });

    const vm = app.mount('#myDiv');  // 綁定id為 myDiv 的元素

 

2.4 class 綁定對象數據

<body>
    <div id="myDiv"></div>
</body>
<script>

    const app = Vue.createApp({     // 創建一個vue應用實例
        
        data() {
            return {
                myColorObject : {
                    "color-red" : true,
                    "font-size-25" : true
                }

            }
        },

        template : '<div :class="myColorObject">hello</div>' 

    });

    const vm = app.mount('#myDiv');  // 綁定id為 myDiv 的元素

 

 myColorObject 對象中，值為 true 代表使用此樣式，為 false 代表不使用

 

2.5 class 綁定數組數據 

<body>
    <div id="myDiv"></div>
</body>
<script>

    const app = Vue.createApp({     // 創建一個vue應用實例
        
        data() {
            return {

                myColorArr : ["color-red", "font-size-25" , {center : true}],

            }
        },


        template : '<div :class="myColorArr">hello</div>'

    });

    const vm = app.mount('#myDiv');  // 綁定id為 myDiv 的元素

 

myColorArr 數組中包含的樣式都會被使用

 

2.6 直接寫 style 的值

<body>
    <div id="myDiv"></div>
</body>
<script>

    const app = Vue.createApp({     // 創建一個vue應用實例

        template : `
            <div style="color:yellow;">                
                hello
            </div>
        `
    });
    const vm = app.mount('#myDiv');  // 綁定id為 myDiv 的元素

 

2.7 style 綁定字符串數據

<body>
    <div id="myDiv"></div>
</body>
<script>

    const app = Vue.createApp({     // 創建一個vue應用實例
        
        data() {
            return {
                myStyle : "color:yellow;"
            }
        },

        template : `
            <div :style="myStyle">                
                hello
            </div>
        `
    });
    const vm = app.mount('#myDiv');  // 綁定id為 myDiv 的元素

 

2.8 style 綁定對象數據

<body>
    <div id="myDiv"></div>
</body>
<script>

    const app = Vue.createApp({     // 創建一個vue應用實例
        
        data() {
            return {
                myStyleObject : {
                    "color" : "blue",
                    "font-size": "25px"
                }
            }
        },
        template : `
            <div :style="myStyleObject">                
                hello
            </div>
        `

    });

    const vm = app.mount('#myDiv');  // 綁定id為 myDiv 的元素

 

3. 綜述

今天聊了一下 VUE3  的 樣式綁定，希望可以對大家的工作有所幫助

歡迎幫忙點贊、評論、轉發、加關注 ：）

關注追風人聊Java，每天更新Java乾貨。

 

4. 個人公眾號

追風人聊Java，歡迎大家關注

Tags:

VirMach 便宜 VPS

QNews

QNews