Vue的樣式綁定詳解

更新時(shí)間：2022年02月24日 16:28:21 作者：Tree_wws

這篇文章主要為大家詳細(xì)介紹了Vue的樣式綁定，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助

1. 樣式綁定（class、style）

1.1 綁定class

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

例如：:class= "mood"

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

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

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

3.綁定class樣式 — 對(duì)象寫(xiě)法使用的場(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樣式  ---  字符串寫(xiě)法
            1. 固定的class類名就正常寫(xiě)，需要?jiǎng)討B(tài)指定的class類名就  :class="xxx"  寫(xiě)到這里面
            2. 使用的場(chǎng)景 : 樣式的類名不確定，需要去動(dòng)態(tài)指定
         -->
        <div class="div1 basic" :class="mood" @click="random">{{name}}</div>

        <!-- 
            需求2 ： 點(diǎn)擊div2 添加類,或者刪除類
            綁定class樣式  --- 數(shù)組寫(xiě)法
            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操作下 " " 里面的寫(xiě)的字符串是表達(dá)式，" '' " 里面寫(xiě)的字符串就是值   -->
        <!-- <div class="div2 basic" :class="['outline','color','size']"></div> -->

        <!-- 
            需求3 ：在outline和color之間進(jìn)行切換
            綁定class樣式  --- 對(duì)象寫(xiě)法
            使用的場(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" :style="styleobj">
        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>