<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>
vue伪类和css区别:1、vue伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id、class、属性等静态的标志。
2、css是用来添加一些选择器的特殊效果。
如图是一个常见的vue文件结构
在app.html 或者*.vue中引入css,如下所示:
在 app.html引入css对阵个页面都生效,在vue文件中引入,只对改vue生成的页面有效