2017/09/15 VUE class与style绑定

总结:  计算属性的方法写在new Vue中的computed对象名中( computed : { } ),,,,,,,,,,,,

方法写在methods对象名中( methods : { } )

一. 对象语法 ( class )

:class="{actiive:isActive}"  // 绑定数据里的属性

:class="classObj"    // 直接绑定数据里的对象

:class="classObj"    //绑定返回对象的计算属性

二. 数组语法 (  class )

:class="[activeClass]"     // 应用一个class列表

:class="[isActive ? activeClass : '', errorClass]"      // 根据条件切换class

:class="[ { active: isActive } ,  errorClass]"     // 当有多个条件class时, 可以在数组语法中使用对象语法

三.  class也可以用在组件上 (  class )

绑定内联样式

一.  对象语法 (  style )

:style="{ color: activeColor, fontSize: fontSize + 'px'

data: {

activeColor:'red',

fontSize:30

}

:style="styleObject"   // 绑定数据里的对象 ,  模板样式更清晰

同样的，对象语法常常结合返回对象的计算属性使用

 

二. 数组语法

:style="[baseStyles, overridingStyles]"

三. 自动添加前缀

当v-bind:style使用需要特定前缀的 CSS 属性时，如transform，Vue.js 会自动侦测并添加相应的前缀。

四. 多重值

从 2.3.0 起你可以为style绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"