一、绑定class的几种方式
1.对象语法
直接看例子:
<div id="app3"> <div :class="{'success':isSuccess,'fail':isFail}">对象绑定class</div> //简单的处理直接使用数据来判断 <div :class="classes">计算属性绑定class</div> //当class的表达式过长或逻辑复杂时,使用计算属性 </div>
var app3 = new Vue({ el: '#app3', data: { isSuccess: true, isFail: false, error: false }, computed: { classes: function(){ return { success: this.isSuccess && !this.error, fail: this.isFail || !this.error } } } });
2.数组语法
直接看例子:
<div id="app4"> <div :class="[successCls,failCls]">绑定多个class属性</div> //用于来绑定多个class属性 <div :class="[{'success':isSuccess},failCls]">绑定多个class属性一</div> //动态的判断添加那些class属性,是最常用的 </div>
var app4 = new Vue({ el: '#app4', data: { successCls: 'success', failCls: 'fail', isSuccess: true, isFail: false } });
<div id= ”app”>
<button :class= ”classes”></button>
</div>
var app = new Vue({ el: '#app', data:{ size : 'large', disabled : true }, computed: { classes: function(){ return [ 'btn', { ['btn-'+this.size]: this.size, ["btn-disabled"]: this.disabled } ] } } });
使用计算属性给元素动态设置类名,在业务中经常用到,尤其是在写复用的组件时,所以在开发过程中,如果表达式较长或逻辑复杂,应该尽可能地优先使用计算属性。
3.在组件上使用
直接看例子:
<div id="app5"> <my-component :class="{'success': isSuccess}"></my-component> </div>
Vue.component('my-component',{ template: '<div class="fail">绑定组件class属性</div>' }); var app5 = new Vue({ el: '#app5', data: { isSuccess: true } });
这种用法仅适用于自定义组件的最外层是一个根元素,否则会无效,当不满足这种条件或需要给具体的子元素设置类名时,应当使用组件的props 来传递。
二、绑定内联样式
直接看例子:
<div id="app6"> <div :style="{'color':color,'fontSize':fontSize+'px'}">文本</div> </div>
var app6 = new Vue({ el: '#app6', data: { color: 'red', fontSize: 14 } });
大多数情况下, 直接写一长串的样式不便于阅读和维护,所以一般写在data 或computed 里
<div id="app6"> <div :style="style">文本</div> </div>
var app6 = new Vue({ el: '#app6', data: { style: { color: 'red', fontSize: 14 } } });