2017/09/15 VUE class与style绑定

2017-09-15  本文已影响26人  竹溪穆褕

总结:  计算属性的方法写在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'] }"

上一篇 下一篇

猜你喜欢

热点阅读