碼迷,www.tparu.icu
吉利平特名人堂 > 其他好文 > 詳細

马经平特图香港最权威:關于vue :style 的幾種使用方式

時間:2018-02-02 18:31:51      閱讀:34514      評論:0      收藏:0      [點我收藏+]

吉利平特名人堂 www.tparu.icu 標簽:return   實驗   字體   live   ima   沒有   white   pos   tco   

:style的使用

一 ,最通用的寫法 

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

  

二, 三元表達式

<a :style="{color:(index==0?arr.conFontColor:‘#000‘)}" :href="con.subTitleHref" target="_self">{{con.subTitle}}</a>

  一和二 可以聯合起來寫 如下

<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看起來很臃腫

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

這里要做的工作分幾步

1>通過計算屬性把要放到一起的樣式歸整一下

2>針對默認值是空值或者特定值的樣式 是不需要將這個樣式放到div上的。

舉例:如果div 已在css樣式里設置了font-size 是16px,那么div行內樣式 就不要存在font-size:16px 這種重復沒有意義 就要做判斷去除

這里想到的辦法是:

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

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

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

代碼如下:

js:

data(){
    return {
        arr:{
            styles:{
                //存放的是 動態修改的樣式
                conTitleStyle:{},// 內容標題總樣式
                conLiStyle:{},//內容li總樣式
                
            },
            pieceStyle:{
                conFontFamily:"",
                conFontSize:16,
                conFontColor:"",
                conBgColor:"",
                conLineHeight:21,// Writing 專用
                conLRCenter:"",// 對齊方式 
                conTopRow:0,//首行縮進 
                conLetterSpace:0,//字體間隔 
                conFontBold:"",//加粗 
                conSpace:""//文字是否省略 
            }
        }
    }
},
computed:{
    diyConTitleStyle:function(){
        var pieceD = this.arr.pieceStyle;
        var fontSizeNum;
        // 判斷對應??閒ontSize的默認值 (默認值設置的和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)
        }
        // 判斷對應??閘ineheight的默認值     
        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
        }
        //過濾掉即刪除掉空值的參數和數值
        for (var i in dt) {
              dt[i]==""?delete(dt[i]):1
        }
        return dt
    }
},
watch:{
    arr:{
        handler(newValue, oldValue) {
            // 監聽是為了把更改后的樣式及時保存到arr.styles里,最后arr是要提交的
            this.arr=newValue;
            this.arr.styles.conTitleStyle=this.diyConTitleStyle;
            this.arr.styles.conLiStyle=this.diyConLiStyle;
    }
    deep: true
    }
}
    
        

html:

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

  最后成果 當font-size是16px時技術分享圖片

當font-size 不是16px時  行內樣式出現font-size了

技術分享圖片

 四,上面arr.styles里我存放兩個樣式 分別是conTitleStyle和conLiStyle ,在有的??槔?,我需要將這兩個樣式放到一個div上面。

我實驗一下用&& 連接,

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

發現只有后面的那個生效。我希望兩個都生效 所以得用數組

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

五,也可以這樣寫 如下 變量和樣式一起寫 也是一同生效的

<span v-if="arr.con.hasLiveMark" class="liveBiao" :style="[arr.styles.conTitleStyle,{left:(arr.con.left!=10?arr.con.left+‘%‘:‘‘),top:(arr.con.top!=5?arr.con.top+‘%‘:‘‘)}]">{{arr.con.LiveMark}}</span>

  

至此 就寫完了。

關于vue :style 的幾種使用方式

標簽:return   實驗   字體   live   ima   沒有   white   pos   tco   

原文地址:https://www.cnblogs.com/weichenzhiyi/p/8406021.html

(1)
(5)
   
舉報
評論 一句話評論(0
0條  
登錄后才能評論!
? 2014 吉利平特名人堂 版權所有 京ICP備13008772號-2
迷上了代碼!
快3二同号稳赚技巧 网络炸金花技巧规律 时时彩最稳赚钱技巧 快三计划软件app免费下载 经典纯人工计划软件app 万能后二直选45注稳赚 极速赛车六码必中规律 苹果彩票 大乐透近100走势基本走势图表 龙虎赌博的规律技巧 足球比分直播球探 手机打鱼游戏现金 重庆时时彩开奖APP 时时彩为什么改为20分钟 最新欢乐生肖娱乐 帝景江西时时