欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

在vue中:style 的使用方式匯總

 更新時間：2024年09月23日 12:14:10   作者：群狼之虎  
在Vue開發(fā)中使用:style綁定樣式是常見需求,應(yīng)注意:class與:style的配合使用,錯誤的使用可能導致樣式不生效,正確的方法是使用數(shù)組綁定多個樣式,這些技巧有助于提高開發(fā)效率和保持代碼整潔,感興趣的朋友跟隨小編一起看看吧

在日常開發(fā)中:style的使用也是比較常見的：

親測有效

1.最通用的寫法 

<p :style="{fontFamily:arr.conFontFamily,color:arr.conFontColor,backgroundColor:arr.conBgColor}">{{con.title}}</p>

2.三元表達式

<a :style="{height:(index==0?'89': ''),margin:(index == 0?'52px 37px':'')color:(index==0?arr.conFontColor:'#000')}" :href="con.subTitleHref" rel="external nofollow"  target="_self">{{con.subTitle}}</a>

3. 還可以以上兩種方法結(jié)合起來

<p :style="{fontFamily:arr.conFontFamily,fontSize:(arr.conFontSize!=0.36?arr.conFontSize+arr.conFontUnit:''),color:arr.conFontColor,backgroundColor:arr.conBgColor}">{{con.title}}</p>

注意：這兩種方式有個弊端，當需要把很多個樣式添加到div上時，div看起來很臃腫

4.用計算屬性

結(jié)合計算屬性 將樣式都提出來 最后形成一個變量 把這個變量添加到div上

這里要做的工作分幾步：

  • 通過計算屬性把要放到一起的樣式歸整一下
  • 針對默認值是空值或者特定值的樣式 是不需要將這個樣式放到div上的。
  • 舉例：如果div 已在css樣式里設(shè)置了font-size 是16px，那么div行內(nèi)樣式 就不要存在font-size:16px 這種重復沒有意義 就要做判斷去除

這里想到的辦法是：

用一個變量存入16 這里是conFontSize，如果conFontSize值等于16 那么就讓font-size:''為空 然后通過循環(huán)style 將為空的font-size 去掉。

如果不等于16 就是修改的，就要正常顯示

將:style="arr.styles.conTitleStyle"添加到div上

代碼如下：

html

<p :style="arr.styles.conTitleStyle">{{con.title}}</p>

js

data(){
    return {
        arr:{
            styles:{
                //存放的是 動態(tài)修改的樣式
                conTitleStyle:{},// 內(nèi)容標題總樣式
                conLiStyle:{},//內(nèi)容li總樣式
            },
            pieceStyle:{
                conFontFamily:"",
                conFontSize:16,
                conFontColor:"",
                conBgColor:"",
                conLineHeight:21,// Writing 專用
                conLRCenter:"",// 對齊方式 
                conTopRow:0,//首行縮進 
                conLetterSpace:0,//字體間隔 
                conFontBold:"",//加粗 
                conSpace:""http://文字是否省略 
            }
        }
    }
},
computed:{
    diyConTitleStyle:function(){
        var pieceD = this.arr.pieceStyle;
        var fontSizeNum;
        // 判斷對應(yīng)模塊fontSize的默認值 (默認值設(shè)置的和css fontsize一樣) 如果等于就讓這一項的css 為空 不等于就走conFontSize 
        if(this.arr.mtype=='Imglist'){
            fontSizeNum=(pieceD.conFontSize!=12)
        }else if(this.arr.mtype=='ImglistScroll'||this.arr.mtype=='NewsList2'){
            fontSizeNum=(pieceD.conFontSize!=17)
        }else if(this.arr.mtype=='NavList'){
            fontSizeNum=(pieceD.conFontSize!=18)
        }else if(this.arr.mtype=='NavDock'){
            fontSizeNum=(pieceD.conFontSize!=14)
        }else if(this.arr.mtype=='NewsList2'){
            fontSizeNum=(pieceD.conFontSize!=15)
        }else{
            fontSizeNum=(pieceD.conFontSize!=16)
        }
        // 判斷對應(yīng)模塊lineheight的默認值     
        if(this.arr.mtype=='NewsList'){
            var　lhnum=(pieceD.conLineHeight!=16)
        }else if(this.arr.mtype=='Writing'){
            var　lhnum=(pieceD.conLineHeight!=21)
        }
        //console.log(lhnum)
        var dt={
            "color":pieceD.conFontColor,
              "font-family":pieceD.conFontFamily,                  
              "font-size":fontSizeNum?pieceD.conFontSize+"px":"",
              "background-color":pieceD.conBgColor,
              "line-height":(lhnum?pieceD.conLineHeight+'px':''),
              "text-align":pieceD.conLRCenter,
              "text-indent":(pieceD.conTopRow!=0?pieceD.conTopRow+'px':''),
              "letter-spacing":(pieceD.conLetterSpace!=0?pieceD.conLetterSpace+'px':''),
              "font-weight":pieceD.conFontBold,
              "white-space":pieceD.conSpace
        }
        //過濾掉即刪除掉空值的參數(shù)和數(shù)值
        for (var i in dt) {
              dt[i]==""?delete(dt[i]):1
        }
        return dt
    }
},
watch:{
    arr:{
        handler(newValue, oldValue) {
            // 監(jiān)聽是為了把更改后的樣式及時保存到arr.styles里,最后arr是要提交的
            this.arr=newValue;
            this.arr.styles.conTitleStyle=this.diyConTitleStyle;
            this.arr.styles.conLiStyle=this.diyConLiStyle;
　　　　}
　　　　deep: true
    }
}

最后成果 當font-size是16px時：

當font-size 不是16px時  行內(nèi)樣式出現(xiàn)font-size了

5.在:style放兩個class樣式怎么放

用&& 連接

<p :style="arr.styles.conTitleStyle&&arr.styles.conLiStyle">{{con.title}}</p>  錯誤

發(fā)現(xiàn)只有后面的那個生效。

我希望兩個都生效 所以得用數(shù)組：正確

<p :style="[arr.styles.conTitleStyle,arr.styles.conLiStyle]">{{con.title}}</p>

到此這篇關(guān)于在vue中:style 的幾種使用方式的文章就介紹到這了,更多相關(guān)vue :style使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • vue實現(xiàn)父子組件雙向綁定的方法總結(jié)

    vue實現(xiàn)父子組件雙向綁定的方法總結(jié)

    Vue.js 是一種流行的 JavaScript 框架,它提供了一種簡單且高效的方式來構(gòu)建用戶界面,在 Vue 中,父子組件之間的雙向綁定是一種常見的需求,下面我們就來學習一下vue中父子組件雙向綁定的常用方法吧
    2023-10-10
  • Vue.js組件tree實現(xiàn)省市多級聯(lián)動

    Vue.js組件tree實現(xiàn)省市多級聯(lián)動

    這篇文章主要為大家詳細介紹了Vue.js組件tree實現(xiàn)省市多級聯(lián)動的相關(guān)資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-12-12
  • el-table多選toggleRowSelection不生效解決方案

    el-table多選toggleRowSelection不生效解決方案

    這篇文章主要給大家介紹了關(guān)于el-table多選toggleRowSelection不生效的解決方案,文中通過圖文以及代碼將解決辦法介紹的非常詳細,需要的朋友可以參考下
    2023-08-08
  • vue仿攜程輪播圖效果(滑動輪播,下方高度自適應(yīng))

    vue仿攜程輪播圖效果(滑動輪播,下方高度自適應(yīng))

    這篇文章主要介紹了vue仿攜程輪播圖效果（滑動輪播,下方高度自適應(yīng)）,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2021-02-02
  • 解決vue 中 echart 在子組件中只顯示一次的問題

    解決vue 中 echart 在子組件中只顯示一次的問題

    vue推薦組件化開發(fā)，所以就把每個圖表封裝成子組件，然后在需要用到該圖表的父組件中直接使用。接下來給大家介紹vue 中 echart 在子組件中只顯示一次的問題，需要的朋友參考下吧
    2018-08-08
  • uniapp中使用lottie實現(xiàn)JSON動畫的操作步驟

    uniapp中使用lottie實現(xiàn)JSON動畫的操作步驟

    這篇文章主要介紹了如何在項目中使用JSON動畫組件,包括創(chuàng)建目錄結(jié)構(gòu)、下載JSON文件、編寫自定義組件代碼以及組件的使用方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
    2025-01-01
  • vue實現(xiàn)登錄攔截

    vue實現(xiàn)登錄攔截

    這篇文章主要介紹了vue實現(xiàn)登錄攔截，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-06-06
  • vue項目基于WebRTC實現(xiàn)一對一音視頻通話

    vue項目基于WebRTC實現(xiàn)一對一音視頻通話

    這篇文章主要介紹了vue項目基于WebRTC實現(xiàn)一對一音視頻通話效果,實現(xiàn)代碼分為前端和后端兩部分代碼,需要的朋友可以參考下
    2024-05-05
  • el-table 行合并的實現(xiàn)示例

    el-table 行合并的實現(xiàn)示例

    本文主要介紹了el-table 行合并的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2022-08-08
  • 如何在Vue中使用protobuf

    如何在Vue中使用protobuf

    這篇文章主要介紹了如何在Vue中使用protobuf，protobuf是由google推出的和語言無關(guān)和平臺無關(guān)，幾乎支持當前的大部分語言，如JavaScript,下文更多相關(guān)介紹需要的小伙伴可以參考一下
    2022-03-03

最新評論