vue 動態(tài)樣式綁定 class/style的寫法小結(jié)

更新時間：2023年03月04日 10:27:59 作者：想搞技術(shù)

這篇文章主要介紹了vue 動態(tài)樣式綁定 class/style的寫法小結(jié),本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

簡介：

綁定樣式：

1、class樣式

寫法：class="xxx" xxx可以是字符串，對象，數(shù)組。

字符串寫法適用于：類名不確定，要動態(tài)獲取。

對象寫法適用于：要綁定多個樣式，個數(shù)確定，名字確定，但不確定用不用。

數(shù)組寫法適用于：要綁定多個樣式，個數(shù)不確定，名字不確定。

2、style樣式

：style="{fonSize : xxx}"其中xxx是動態(tài)值，鍵值要用小駝峰命名法。

：style="[a,b]"其中a，b是樣式對象。

class樣式：

字符串寫法：類名不確定，要動態(tài)獲取

通過v-bind動態(tài)綁定樣式：

//樣式-----------------------------------------
    <style>
        .basic{
            border: 5px solid rgb(77, 191, 252);   //邊框
            width: 400px;   //寬
            height: 100px;  //高
        }
        .style1{
            border: 5px solid rgb(75, 139, 235);  //邊框
            background-color: rgb(20, 117, 122);  //背景顏色
            color: bisque;    //字體顏色 
            
        }
        .style2{
            border: 5px solid rgb(182, 219, 131);  //邊框
            background-color: rgb(222, 171, 203);  //背景
            color: rgb(16, 23, 29);   //字體
            border-radius: 10px;   //圓角
        }
        .change1{
            background: -webkit-linear-gradient(left,rgb(182, 219, 131),rgb(241, 137, 201));   //漸變背景
            
        }
        .change2{
            font-size: larger;    //大號字體
            border-radius: 30px;  //圓角
 
        }
    </style>

<div id="gjs">
    <h1>字符串方法</h1>
    <div class="basic" :class="style">
        {{name}} <br>
        <button @click="changeStyle">改變樣式</button>
    </div>
    <hr>    
    <h1>對象方法</h1>
    <div class="basic" :class="styleObj">
        {{name}}
        <br>
        <button @click="changeStyle1">改變樣式</button>
    </div>
    <hr>
    <h1>數(shù)組方法</h1>
    <div class="basic" :class="styleArr">
        {{name}}
        <br>
        <button @click="changeStyle2">減少樣式</button>
        <button @click="changeStyle3">增加樣式</button>
    </div>
    <h1>style方法1</h1>
    <div class="basic" :style="{fontSize : fsize+'px'}">
        {{name}}
    </div>
    <h1>style方法2</h1>
    <div class="basic" :style="fontSize">
        {{name}}
    </div>
</div>

<body>
    //v-bind簡寫 ： 將樣式style1綁定到div :class="style"-------------------------------------------
    <div id="gjs" class="basic" :class="style">{{name}}</div>
    <script>
        const vm = new Vue({
            el: '#gjs',
            data:{
                name: '搞技術(shù)',
                //定義類名-可以通過綁定事件更改為其他類名更改樣式-----------------------------------
                style: 'style1',
            },
        })
    </script>
</body>

也可以添加按鈕綁定點擊事件改變參數(shù)，點擊按鈕將style的參數(shù)變?yōu)閟tyle2，通過添加判斷實現(xiàn)來回改變樣式

        const vm = new Vue({
            el: '#gjs',
            data:{
                name: '搞技術(shù)',
                style: '',
            },
            methods: {
                changeStyle(){
                    if (this.style == 'style2') {
                        this.style = 'style1'
                    } else {
                        this.style = 'style2'
                    }
                    
                }}

對象寫法：要綁定多個樣式，個數(shù)確定，名字確定，但不確定用不用。

通過點擊按鈕或者控制臺修改對象屬性的值來控制樣式的變化

    <script>
        const vm = new Vue({
            el: '#gjs',
            data:{
                name: '搞技術(shù)',
                styleObj:{  
                    change1:false,
                    change2:false,
                }
            },
            methods: {
                changeStyle1(){
                    if (this.styleObj.change1 == true) {
                        this.styleObj.change1 = false
                        this.styleObj.change2 = false
                    } else {
                        this.styleObj.change1 = true
                        this.styleObj.change2 = true
                    }
                }
    })
    </script>

數(shù)組寫法：要綁定多個樣式，個數(shù)不確定，名字不確定。

    <script>
        const vm = new Vue({
            el: '#gjs',
            data:{
                name: '搞技術(shù)',
                styleArr:['change1','change2'],
            },
            methods: {
                changeStyle2(){
                    this.styleArr.shift()
                },
                changeStyle3(){
                    this.styleArr.unshift('change1')
                }
            }
    })
    </script>

通過綁定事件對數(shù)組中的值進行修改，點擊減少則移除數(shù)組中的值，點擊添加則給數(shù)組中添加值來控制樣式的變化

所以背景顏色消失

style方法（鍵值要用小駝峰命名法）

    //
    <h1>style方法1</h1>
    <div class="basic" :style="{fontSize : fsize+'px'}">    //這里的fontSize小駝峰
        {{name}}
    </div>
    <h1>style方法2</h1>
    <div class="basic" :style="fontSize">
        {{name}}
    </div>

    <script>
        const vm = new Vue({
            el: '#gjs',
            data:{
                name: '搞技術(shù)',
                fsize:40,   //方法1
                fontSize:{
                    fontSize:'40px',
                },  //方法2這里的fontSize小駝峰
            }
    })
    </script>

到此這篇關(guān)于vue 動態(tài)樣式綁定 class/style的寫法小結(jié)的文章就介紹到這了,更多相關(guān)vue 動態(tài)樣式綁定 class和style內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: