在vue中:style 的使用方式汇总

更新时间：2024年09月23日 12:14:10 作者：群狼之虎

在Vue开发中使用:style绑定样式是常见需求,应注意:class与: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. 还可以以上两种方法结合起来

<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.用计算属性

结合计算属性将样式都提出来最后形成一个变量把这个变量添加到div上

这里要做的工作分几步：

通过计算属性把要放到一起的样式归整一下
针对默认值是空值或者特定值的样式是不需要将这个样式放到div上的。
举例：如果div 已在css样式里设置了font-size 是16px，那么div行内样式就不要存在font-size:16px 这种重复没有意义就要做判断去除

这里想到的办法是：

用一个变量存入16 这里是conFontSize，如果conFontSize值等于16 那么就让font-size:''为空然后通过循环style 将为空的font-size 去掉。

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

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

代码如下：

html

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

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

最后成果当font-size是16px时：

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

5.在:style放两个class样式怎么放

用&& 连接

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

发现只有后面的那个生效。

我希望两个都生效所以得用数组：正确

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

到此这篇关于在vue中:style 的几种使用方式的文章就介绍到这了,更多相关vue :style使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue
:style

Vue 封装防刷新考试倒计时组件的实现
这篇文章主要介绍了Vue 封装防刷新考试倒计时组件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-06-06
Vue.js实现微信过渡动画左右切换效果
这篇文章主要给大家介绍了利用Vue.js仿微信过渡动画左右切换效果的相关资料，需要用到的技术栈是Vue+Vuex。文中通过示例代码介绍的非常详细，对大家具一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-06-06
vue实现点击按钮倒计时
这篇文章主要为大家详细介绍了vue实现点击按钮倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
vue 首页加载,速度优化及解决首页白屏的问题
这篇文章主要介绍了vue 首页加载,速度优化及解决首页白屏的问题，具有很好的参考价值，希望对大家有所帮助。
2022-10-10
vue3利用keepAlive缓存页面实例详解
<keep-alive> 是一个抽象组件,它自身不会渲染一个DOM元素,也不会出现在组件的父组件链中,下面这篇文章主要给大家介绍了关于vue3利用keepAlive缓存页面的相关资料,需要的朋友可以参考下
2022-11-11
vue3.0 子组件如何修改父组件传递过来的值
这篇文章主要介绍了vue3.0 子组件如何修改父组件传递过来的值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
详解Vue3页面如何自适应表格滚动高度
这篇文章主要为大家详细介绍了Vue3页面如何自适应表格滚动高度,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下
2024-02-02
关于iview按需引用后使用this.$Modal报错的解决
这篇文章主要介绍了关于iview按需引用后使用this.$Modal报错的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
Vue3 组件之间传值及适用场景分析
这篇文章主要介绍了Vue3组件之间传值及适用场景分析,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
2025-05-05
Vue3（二）集成Ant Design Vue
上一篇文章我们介绍了利用Vue3 创建Vue CLI 项目（一），接下来就来看看Vue3集成Ant Design Vue 的相关资料，需要的小伙伴可以参考一下文章的具体内容
2021-10-10