vuestyle,vuestyle设置

VUE强制绑定class和style

1.在应用界面中，某些元素的样式是变化的

class/style绑定就是用来专门实现动态样式效果的技术

2.class绑定 ：

class=‘xxx’

xxx是字符串，数组，对象

3.style绑定：

：style=“{color：activeColor，fontSize：fontSize+‘px’}”

其中activeColor，fontSize是data属性

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

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

Vue中使用Style变量

Vue能不能实现数据驱动style样式呢？

官方提供的办法是在 template 里使用 :style 或者 :class 的方式赋值。但它们有个缺陷，即无法设置 伪元素 的css属性，例如，如果想设置

就没法用上述方法实现。

css提供了 var() 函数，能够动态设置样式的属性。Vue可以通过下面这两种方法实现对 var() 函数的传参。