Vue.js样式绑定

样式绑定

class和style时html元素的属性，可以使用v-bind来进行样式的yi绑定，以设置样式。

v-bind在绑定class和style时，Vue专门增强了它。结果类型不仅可以时字符串，还可以是对象和数组。

class属性绑定

1：基本使用：

<style>

.static{...}

.class1{...}

//最好不使用中划线

//.class2-abc{...}

.class2_abc{...}

</style>

<div id="app">

<div v-bind:class="{ class1: isActive1 }"></div>

</div>

<script>

new Vue({

el: '#app',

data: {

isActive1: true,

//注意，如果data中使用中划线的话，需要加单引号。否则出错。而且，在v-bind中使用时，也需要加单引号。加上单引号又无法识别数据，默认为true。

//所以，尽量不要在data中使用中划线。

//下划线没问题。

//is-active2:true

is_active2:true

}

});

</script>

以上可以根据isACtive的值，动态判断来进行class样式的绑定。

提示：为了避免不必要的问题，data中和style中的class，最好不要用中划线。

2：也可以绑定多个

<div id="app">

<div class="static" v-bind:class="{class1:isActive, class2_abc:is_active2}"></div>

</div>

这里，会把v-bind动态绑定的class合并到前面的class中。

3：使用对象

<div id="app">

<div v-bind="classObject"></div>

</div>

<script>

new Vue({

el:'#app',

data:{

classObject:{

class1:true,

class2_abc:true

}

}

});

</script>

这里，v-bind中直接使用对象进行绑定。与前面不同的时，对象中的键应该和style中定义的class样式名对应。虽然可以使用中划线，用引号括起来。但是同样不建议。

其实很好理解，把v-bind中的对象直接替换为{class1:true,class2_abc:true}，这和前面两个是相同的。

4：使用数组

<div id="app">

<div v-bind="[classArr1,classArr2]"></div>

</div>

<script>

new Vue({

el:'#app',

data:{

classArr1:'class1',

classArr2:'class2_abc'

}

});

</script>

这里，v-bid中使用数组进行绑定。可以理解为将data中的属性值替换到了class中。

5：使用计算属性

这是强大且常用的方式。

<div id="app">

<div v-bind="classObject"></div>

</div>

<script>

new Vue({

el:'#app',

data:{

isActive:true,

error:null

},

computed:{

classObject:function(){

return{

class1: this.isActive && !this.error,

class2_abc: !this.error && this.error == null

}

}

}

});

</script>

用法就是这样，可以借助计算属性做一些复杂的逻辑判断等等。

 

style属性绑定

1：直接设置样式：

<div id="app">

<div v-bind:style="{color: activeColor, fontSize: fontSize + 'px'}">vue学习</div>

</div>

<script>

new Vue({

el:'#app',

data:{

activeColor:green,

fontSize:50

}

})

</srcipt>

使用清晰明了。需要注意的就是v-bind中属性名和css中样式的对应。如fontSize 对应font-size。

2：也可以直接使用对象

<div id="app">

<div v-bind:style="styleObject">vue学习</div>

</div>

<script>

new Vue({

el:'#app',

data:{

styleObject:{

color:'green',

fontSize:'30px'

}

}

});

</script>

与直接使用类似，只是要注意对象的属性和css中的样式对应。

3：同样可以使用数组

<div id="app">

<div v-bind:style="[styleArr1,styleArr2]">vue学习</div>

</div>

<script>

new Vue({

el:'#app',

data:{

styleArr1:{

color:'green',

fontSize:'30px'

},

styleArr2:{

fontSize:'bold'

}

}

});

</script>