溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Vue如何實(shí)現(xiàn)樣式綁定

發(fā)布時(shí)間:2022-02-25 09:18:08 來源:億速云 閱讀:123 作者:小新 欄目:開發(fā)技術(shù)

小編給大家分享一下Vue如何實(shí)現(xiàn)樣式綁定,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!

    1. 樣式綁定(class、style)

    1.1 綁定class

    固定的類名就正常的寫,需要?jiǎng)討B(tài)綁定的類名就v-bind去綁定它

    例如::class= "mood"

    下面舉一些適用的場(chǎng)景:

    1.綁定class樣式—字符串寫法,適用于:樣式的類名不確定,需要?jiǎng)討B(tài)指定

    2.綁定class樣式 — 數(shù)組寫法使用的場(chǎng)景 :綁定的樣式的個(gè)數(shù)不確定,名字也不確定

    3.綁定class樣式 — 對(duì)象寫法使用的場(chǎng)景:綁定的個(gè)數(shù)確定的,名字也確定,不確定的是用不用該類名

     <body>
        <style>
            .basic {
                width: 100px;
                height: 100px;
                border: 2px solid black;
            }
            .happy {
                width: 100px;
                height: 100px;
                border: 2px solid orange;
                background-color: palevioletred;
            }
            .sad {
                width: 100px;
                height: 100px;
                border: 2px solid black;
                background-color: silver;
            }
            .normal {
                width: 100px;
                height: 100px;
                border: 2px solid greenyellow;
                background-color: sandybrown;
            }
            .outline {
                border-radius: 20%;
            }
            .color {
                color: skyblue;
            }
            .size {
                font-family: '微軟雅黑';
                font-size: 20px;
                font-weight: bold;
            }
        </style>
        <div id="root">
            <!-- 
                需求1 :點(diǎn)擊div1 隨機(jī)切換mood
                綁定class樣式  ---  字符串寫法
                1. 固定的class類名就正常寫,需要?jiǎng)討B(tài)指定的class類名就  :class="xxx"  寫到這里面
                2. 使用的場(chǎng)景 : 樣式的類名不確定,需要去動(dòng)態(tài)指定
             -->
            <div class="div1 basic" :class="mood" @click="random">{{name}}</div>
    
            <!-- 
                需求2 : 點(diǎn)擊div2 添加類,或者刪除類
                綁定class樣式  --- 數(shù)組寫法
                1. 使用的場(chǎng)景 :綁定的樣式的個(gè)數(shù)不確定,名字也不確定
                2. shift() :移除數(shù)組中第一個(gè)數(shù)據(jù), push("xxx");在末尾添加一個(gè)新的數(shù)據(jù)
             -->
            <div class="div2 basic" :class="classArr" @click = "remove">{{name}}</div> 
    
            <!-- 注意點(diǎn):在vue操作下 " " 里面的寫的字符串是表達(dá)式," '' " 里面寫的字符串就是值   -->
            <!-- <div class="div2 basic" :class="['outline','color','size']"></div> -->
    
            <!-- 
                需求3 :在outline和color之間進(jìn)行切換
                綁定class樣式  --- 對(duì)象寫法
                使用的場(chǎng)景:綁定的個(gè)數(shù)確定的,名字也確定,不確定的是用不用該類名
             -->
             <div class="div3 basic" :class="classObj" @click="change">{{name}}</div>
        </div>
        <script>
            Vue.config.productionTip = false
            let vm = new Vue({
                el: '#root',
                data: {
                    name: "Hello,Vue!",
                    mood: "normal",
                    classArr:['outline','color','size'],
                    classObj:{
                        outline:true,
                        color:true
                    }
                },
                methods: {
                    random() {
                        let arr = ["happy", "sad", "normal"]
                        // Math.floor : 表示向下取整, Math.random():取值是0-1,1是取不到的
                        this.mood = arr[Math.floor(Math.random() * 3)]
                    },
                    remove(){
                        this.classArr.shift()
                    },
                    change(){
                       vm.classObj.color = !vm.classObj.color
                       vm.classObj.outline = !vm.classObj.outline
                    }
                }
            })
        </script>

    1.2 綁定style

    例如::style = "styleobj"

    <div id="root" :>
            Hello,{{name}}!
        </div>
        <script>
            Vue.config.productionTip = false
            let vm = new Vue({
                el: '#root',
                data: {
                    name:"Vue",
                    styleobj:{
                        fontSize: 50 + "px",
                        color: "red",
                        border:1+"px"+" "+"solid"+" "+"black"             
                    }
                }
            })
        </script>

    以上是“Vue如何實(shí)現(xiàn)樣式綁定”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!

    向AI問一下細(xì)節(jié)

    免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

    vue
    AI