快捷導(dǎo)航

使用Vue綁定class和style樣式的幾種寫法總結(jié)

更新時(shí)間：2023年07月17日 09:47:46 作者：小花皮豬

這篇文章主要介紹了使用Vue綁定class和style樣式的幾種寫法，文章通過(guò)代碼示例介紹的非常詳細(xì)，具有一定的參考價(jià)值,需要的朋友可以參考下

綁定class樣式

首先寫一個(gè)簡(jiǎn)單的class樣式，和一個(gè)div容器方便調(diào)試這些class樣式簡(jiǎn)單說(shuō)下用途：basic是最基本的樣式，我們可以配合另外一個(gè)class樣式使用，也就是happy，sad，normal這三個(gè)其中一個(gè)配合使用，hello1，hello2，hello3這三個(gè)樣式我們可以一起使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <style>
        .basic{
           width: 300px;
           height: 100px;
           border: 1px solid black;
        }
        .happy{
            border:4px solid red;
            background-color: rgba(255, 255, 0, 0.644);
            background: linear-gradient(30deg,yellow,pink,orange,yellow);
        }
        .sad{
            border:4px solid cyan;
            background-color: rgba(12, 23, 0, 0.644);
            background: linear-gradient(30deg,rgb(178, 60, 5),rgb(168, 72, 88),rgb(155, 47, 146),rgb(114, 40, 40));
        }
        .normal{
            border:4px solid rgba(12, 107, 107, 0.608);
            background-color: rgba(12, 23, 0, 0.644);
            background: linear-gradient(30deg,rgb(178, 60, 5),rgb(121, 142, 38),rgb(157, 67, 150),rgb(239, 169, 169));
        }
        .hello1{
            background-color: orchid
        }
        .hello2{
            font-size: 40px;
        }
        .hello3{
            color:red
        }
    </style>
    <!-- 引入vue.js -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
       <div>test</div>
    </div> 
    <script type="text/javascript">
    </script>
</body>
</html>

在頁(yè)面上給元素增加class樣式

不同的樣式配置效果也是不同的

三個(gè)hello樣式一起使用，效果就更豐富

由于basic樣式是最基本的，所以我們可以直接把它寫上，完善下代碼

現(xiàn)在提出需求：這個(gè)div有兩個(gè)樣式方案，一開始div的class樣式是basic和normal，如果點(diǎn)擊div則換成basic和happy

錯(cuò)誤演示：使用demo操作，如果我們親自使用demo獲取對(duì)象，那么就違背了vue的設(shè)計(jì)，雖然可以實(shí)現(xiàn)效果，但是這種方式是不可取的

我們分析需求，其實(shí)不變的是basic，改變的是normal，所以我們可以把class樣式定義一個(gè)屬性，通過(guò)單擊事件去切換樣式

字符串寫法

特點(diǎn)：適用于樣式的類名不確定，需要?jiǎng)討B(tài)指定

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <style>
        .basic{
           width: 300px;
           height: 100px;
           border: 1px solid black;
        }
        .happy{
            border:4px solid red;
            background-color: rgba(255, 255, 0, 0.644);
            background: linear-gradient(30deg,yellow,pink,orange,yellow);
        }
        .sad{
            border:4px solid cyan;
            background-color: rgba(12, 23, 0, 0.644);
            background: linear-gradient(30deg,rgb(178, 60, 5),rgb(168, 72, 88),rgb(155, 47, 146),rgb(114, 40, 40));
        }
        .normal{
            border:4px solid rgba(12, 107, 107, 0.608);
            background-color: rgba(12, 23, 0, 0.644);
            background: linear-gradient(30deg,rgb(178, 60, 5),rgb(121, 142, 38),rgb(157, 67, 150),rgb(239, 169, 169));
        }
        .hello1{
            background-color: orchid
        }
        .hello2{
            font-size: 40px;
        }
        .hello3{
            color:red
        }
    </style>
    <!-- 引入vue.js -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- 綁定class樣式 --字符串寫法，適用于樣式的類名不確定，需要?jiǎng)討B(tài)指定 -->
       <div class="basic " :class="mood"  @click="changeMood">{{name}}</div>
    </div>    
</body>
<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            name:'vue',
            mood:'normal'
        },
        methods: {
            changeMood(){
                // 獲取div改變class樣式
                this.mood='happy'
            }
        },
    })
</script>
</html>

現(xiàn)在又有一個(gè)需求，就是點(diǎn)擊div隨機(jī)切換class樣式

我們可以把多個(gè)樣式定義成一個(gè)數(shù)組，隨機(jī)使用下標(biāo)作為樣式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <style>
        .basic{
           width: 300px;
           height: 100px;
           border: 1px solid black;
        }
        .happy{
            border:4px solid red;
            background-color: rgba(255, 255, 0, 0.644);
            background: linear-gradient(30deg,yellow,pink,orange,yellow);
        }
        .sad{
            border:4px solid cyan;
            background-color: rgba(12, 23, 0, 0.644);
            background: linear-gradient(30deg,rgb(178, 60, 5),rgb(168, 72, 88),rgb(155, 47, 146),rgb(114, 40, 40));
        }
        .normal{
            border:4px solid rgba(12, 107, 107, 0.608);
            background-color: rgba(12, 23, 0, 0.644);
            background: linear-gradient(30deg,rgb(178, 60, 5),rgb(121, 142, 38),rgb(157, 67, 150),rgb(239, 169, 169));
        }
        .hello1{
            background-color: orchid
        }
        .hello2{
            font-size: 40px;
        }
        .hello3{
            color:red
        }
    </style>
    <!-- 引入vue.js -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- 綁定class樣式 --字符串寫法，適用于樣式的類名不確定，需要?jiǎng)討B(tài)指定 -->
       <div class="basic " :class="mood"  @click="changeMood">{{name}}</div>
    </div>    
</body>
<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            name:'vue',
            mood:'normal'
        },
        methods: {
            changeMood(){
                // 獲取div改變class樣式
                const arr=['happy','sad','normal']
                const index=Math.floor(Math.random()*3)
                this.mood=arr[index]
            }
        },
    })
</script>
</html>

點(diǎn)擊div就會(huì)隨機(jī)切換圖片

數(shù)組寫法

特點(diǎn)：適用于要綁定的樣式個(gè)數(shù)不確定，名字也不確定現(xiàn)在又有一個(gè)需求，新增一個(gè)div，基本樣式還是basic，這個(gè)div樣式可能有多個(gè) 可以把多個(gè)class定義成一個(gè)數(shù)組

可以通過(guò)vue管理工具切換動(dòng)態(tài)刪除新增樣式

對(duì)象寫法

特點(diǎn)：適用于要綁定的樣式個(gè)數(shù)確定，名字也確定，但是用動(dòng)態(tài)決定用不用又提出一個(gè)新的需求：新增一個(gè)div，這個(gè)div可以使用的樣式可以是同時(shí)hello1,hello2，也可以是只有hello1,或者只有hello2,或者兩個(gè)樣式一個(gè)也沒(méi)有這種情況我們可以把需要用到的樣式定義成一個(gè)對(duì)象

我們可以點(diǎn)擊復(fù)選框切換屬性或者手動(dòng)輸入切換

綁定style樣式

樣式的綁定不僅僅有class選擇器，還有行內(nèi)style樣式

<div class="basic" :style="{fontSize:fSize+'px'}">{{name}}</div><br><br>

但是這樣太單調(diào)了，通常我們是把多個(gè)是style樣式放在一個(gè)對(duì)象里面

style的對(duì)象寫法

注意：如果key是一個(gè)單詞就正常寫即可，如果是多個(gè)單詞，需要遵循駝峰寫法。比如font-size要寫成fontSize

由vue管理的屬性，可以自由切換值

style的數(shù)組寫法

style也可以使用數(shù)組寫法，只是這種寫法寫的比較少

總結(jié)

綁定樣式： 1 class樣式寫法：class='xxx' xxx可以是字符串，對(duì)象，數(shù)組字符串寫法適用于：類名不確定，要?jiǎng)討B(tài)獲取對(duì)象寫法適用于：要綁定多個(gè)樣式，個(gè)數(shù)不確定，名字也不確定數(shù)組寫法適用于：要綁定多個(gè)樣式，個(gè)數(shù)確定，名字也確定，但不確定用不用 2 style樣式 :style="fontSize:xxx"，其中xxx是動(dòng)態(tài)值，fontSzie=font-size,如果只有一個(gè)單詞正常寫即可，如果多個(gè)需要使用駝峰命名 :style="[a,b]"，其中a,b是樣式對(duì)象

以上就是使用Vue綁定class和style樣式的幾種寫法總結(jié)的詳細(xì)內(nèi)容，更多關(guān)于使用Vue綁定class和style的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: