腳本之家服務器常用軟件

快捷導航

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

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

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

綁定class樣式

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

<!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>

在頁面上給元素增加class樣式

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

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

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

現在提出需求：這個div有兩個樣式方案，一開始div的class樣式是basic和normal，如果點擊div則換成basic和happy

錯誤演示：使用demo操作，如果我們親自使用demo獲取對象，那么就違背了vue的設計，雖然可以實現效果，但是這種方式是不可取的

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

字符串寫法

特點：適用于樣式的類名不確定，需要動態(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樣式 --字符串寫法，適用于樣式的類名不確定，需要動態(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>

現在又有一個需求，就是點擊div隨機切換class樣式

我們可以把多個樣式定義成一個數組，隨機使用下標作為樣式

<!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樣式 --字符串寫法，適用于樣式的類名不確定，需要動態(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>

點擊div就會隨機切換圖片

數組寫法

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

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

對象寫法

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

我們可以點擊復選框切換屬性或者手動輸入切換

綁定style樣式

樣式的綁定不僅僅有class選擇器，還有行內style樣式

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

但是這樣太單調了，通常我們是把多個是style樣式放在一個對象里面

style的對象寫法

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

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

style的數組寫法

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

總結

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

以上就是使用Vue綁定class和style樣式的幾種寫法總結的詳細內容，更多關于使用Vue綁定class和style的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: