美文网首页
vue 的css及style的三种绑定方式

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

作者: 醉青风 | 来源:发表于2021-08-16 10:23 被阅读0次

    css

    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>

    js

    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>

    相关文章

      网友评论

          本文标题:vue 的css及style的三种绑定方式

          本文链接:https://www.haomeiwen.com/subject/lalmbltx.html