vue 的css及style的三种绑定方式

html-css013

vue 的css及style的三种绑定方式,第1张

1.数组方法,元素为css的名称,可以在里面使用三目运算

<div :class="[ isOne?'one':'', 'two']">数组方法 </div>

2.对象方法,元素键名为css名称,用true和false 来控制是否显示

<div :class="{'one':isOne,'two':true}">对象方法</div>

3.直接加入,加入的内容是css名称,可以通过计算来控制显示的css,名称

<div :class="isOne?'one':'two'" >直接加入</div>

1.数组方法,元素是一个个对象,对象则是style的键值对,当然可以用三目运算控制

<div :style="[{color: 'green',fontSize: '30px'} , isOne ?{'font-weight': 'bold'}:{}]" >数组方法</div>

2.对象方法,元素键名为style名称,值为style属性值。当然可以用三目运算控制来控制是否显示对应的style属性值

<div :style="{ color: isOne ?'green':'#f00' , backgroundColor:'#f00'}" >对象方法</div>

3.直接加入,只要保证得出来的字符串是正确的即可,怎么用都可以

<div :style="(isOne ? 'color:green' : '')+ 'backgroundColor:#f00' ">直接加入</div>

最近项目中要求实现夜间模式,整理一下实现方法。 ps. 我们的项目是混合开发,所以夜间模式要通过原生交互实现,如果直接是h5项目,则可省去原生交互这块。 step1 原生交互方法 step2  获取模式方法 step3 实现方法1、使用css大类区分 2、针对不同class类定义css属性全局变量 3、全局引入样式文件(main.js中引入) 4、页面中可定义css私有变量(包含页面中特殊的颜色属性,不止涉及亮度更改的图片)        变量定义规范:--(页面名称)-自定义         建议将白天与夜间模式图片区分两个文件夹存储5、变量使用规范总结: 1、注意css变量的使用的兼容性,例如安卓5的手机可能识别不了变量,解决方法:postcss可以试试看 2、如果项目中已使用less,可直接用less来实现,现未发现其兼容性问题(下一篇文章我会写less实现夜间模式)