码迷,mamicode.com
                                                                              首页 > 其他好文 > 详细

                                                                              关于vue :style 的几种使用方式

                                                                              时间:2018-02-02 18:31:51      阅读:22640      评论:0      收藏:0      [点我收藏+]

                                                                              标签: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>针?#38405;?#35748;值是空值或者特定值的样式 是不需要将这个样式放到div上的。

                                                                              举例:如果div ?#35328;赾ss样式里设置了font-size 是16px,那么div行内样式 就不要存在font-size:16px 这种重复没有意义 就要做判断去除

                                                                              这里想到的办法是:

                                                                              用一个变?#30475;?#20837;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;
                                                                                      // 判断对应模块fontSize的默认值 (默认值设置的和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)
                                                                                      }
                                                                                      // 判断对应模块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
                                                                                      }
                                                                                      //过滤掉即删除掉空值的参数和数值
                                                                                      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时技术分享?#35745;? src=

                                                                              当font-size 不是16px时  行内样式出现font-size了

                                                                              技术分享?#35745;? src=

                                                                               ?#27169;?#19978;面arr.styles里我存放两个样式 分别是conTitleStyle和conLiStyle ,在有的模块里,我需要将这两个样式放到一个div上面。

                                                                              我实验一下用&& 连接,

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

                                                                              发?#31181;?#26377;后面的那个生效。我希望两个都生效 所以得用数组

                                                                              <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)
                                                                              (3)
                                                                                 
                                                                              举报
                                                                              评论 一句话评论(0
                                                                              0条  
                                                                              登录后才能评论!
                                                                              ? 2014 mamicode.com 版权所有 京ICP备13008772号-2
                                                                              迷上了代码!
                                                                              宁夏11选5开奖查询