一,前言
前面methods,computed,watch告一段落,
基础知识这块的顺序确实有些乱,日后需要花时间捋一下,应该影响不大
之前已经解除过了v-bind及他的语法糖":"写法,这篇介绍class和style的绑定
二,绑定class
Vue通过v-bind:class(:class)对class进行绑定,
绑定的值可以是多种类型,如:字符串,对象,数组
可以通过改变绑定值动态切换class
1,字符串类型
<style>
.classA {
color: red;
}
.classB {
color: blue;
}
</style>
<div id="app">
<p :class="myClass">:class值为字符串</p>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
myClass: 'classA'
}
})
</script>运行结果:
查看DOM:
使用devTools修改变量myClass值为classB:
通过字符串形式为:class绑定变量myClass,为myClass赋值为classA,
最终为Dom应用class样式类,当变量名改变时,可以实现动态更改样式
2,对象类型
对象类型即Json格式,Json对象中可以包含多个键值,
因此可实现对多个class进行绑定和切换控制
键为class名称(字符串),值为布尔类型,表示是否应用此样式
<div id="app">
<div :class="{'active': isActive, 'error': isError}">
对象类型-多个class分别控制应用
</div>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
isActive: true, // 应用样式
isError: false // 不应用样式
}
})
</script>渲染结果:
<div class="active">
对象类型-多个class分别控制应用
</div>此外,如果:class表达式过长或逻辑教复杂,可将逻辑绑定到计算属性
<div id="app">
<div :class="classes">
对象类型-封装在对象属性中
</div>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
isActive: true, // 应用样式
isError: false // 不应用样式
},
computed:{
classes:function() {
return {
active: this.isActive && !this.isError,
error: this.error
}
}
}
})
</script>除了计算属性,还可以使用methods或绑定到Object类型的数据
3,数组类型
:class值为数组类型,有点儿类似于字符串类型的情况
只不过字符串只能绑定单个class,数组可以同时绑定多个class
<div id="app">
<div :class="[activeClass, errorClass]">
数组类型
</div>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
activeClass: 'active',
errorClass: 'error'
}
})
</script>渲染结果:
<div class="active error">数组类型</div>也可以使用三元表达式控制class的切换和显示
<div :class="[isActive ? activeClass : '', errorClass]">数组类型-三元表达式</div>数组中也可以包含对象类型,所以可以在数组中应用上边对象类型的写法对class进行控制应用
<div :class="[{'active': isActive}, errorClass]">数组类型包含对象类型</div>最后,与对象类型的写法一样,也可以使用data,computed或methods方式对class进行控制
以计算属性为例-使用计算属性,返回数字
<button class="classes"></button>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
size: 'large',
disabled: true
},
computed: {
classes: function() {
return [
'btn'
{
['btn-' + this.size]: this.size !== '',
['btn-disabled']: this.disabled
}
]
}
}
})
</script>渲染结果为:
<button class="btn btn-large btn-disabled"></button>注意:此处使用Json语法,[‘btn-’ + this.size],动态拼接出class名称
4,对于样式的绑定还可以应用在组件上
对样式的绑定还可以应用在组件上,虽然目前尚未介绍到组件,但用法和上边的方式相同
注意:
扫描二维码关注公众号，回复：
2846430 查看本文章
这种用法仅适用于自定义组件的最外层是一个根元素的情况,否组无效
当不满足此种情况且需要为子元素设置类名时,应使用组件props进行传递,
绑定style也同样适用
三,绑定内联样式style
适用v-bind:style(:style)为元素绑定内联样式,方法与:class相似
:style的值类型也可以为对象或数组
1,通过变量为内敛样式的属性赋值
像正常写内联样式一样,将内敛样式的属性值用变量进行传递
<div id="app">
<p :style="{color:activeColor, 'fontSize': fontSize}">
通过变量为内敛样式的属性赋值
</p>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
activeColor: 'red',
fontSize: '20px'
}
})
</script>运行结果:
属性名适用驼峰命名(camelCase)或短横线分隔命名(kebab-case),渲染结果为:
注意 : fontSize渲染结果为font-size
2,对象方式为:style赋值
向上边的例子,在html中写入很长一段样式是不便于阅读和维护的
可以将样式以对象的形式写到data或computed中,再对:style进行赋值
以data为例:
<div id="app">
<p :style="styles">
对象方式为:style赋值
</p>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
styles:{
color: 'red',
fontSize: 20 + 'px'
}
}
})
</script>3,数组方式为:style赋值
:style值为数组类型,和:class数组类型语法类似
数组语法可以同时应用多个样式对象,如:
<div :style="styleA, styleB">数组方式为:style赋值</div>注意:
在实际开发中,:style并不常用,好比不提倡写内联样式一样
往往将样式写到一个对象或计算属性中
使用:style时,Vue.js会自动为特殊的CSS属性名称添加前缀,如:transform
四,结尾
关于样式绑定的介绍就到这里,对于多种方式的选取,需要根据项目的实际情况考虑