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