vue样式class和style(二)
- 第一篇:vue基础介绍,数据绑定(computed+watch) (opens new window)
- 第二篇:vue样式class和style (opens new window)
- 第三篇:vue组件及生命周期 (opens new window)
- 第四篇:vue父子组件之间的数据传递 (opens new window)
- 第五篇:vue动画与过渡 (opens new window)
- 第六篇:vue-router路由的使用 (opens new window)
- 第七篇:vuex数据管理 (opens new window)
# Vue绑定html class
在绑定对象是class的时候,表达式结果的类型出了字符串外还可以是对象或数组。
# 对象语法
<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
1
data: {
isActive: true,
hasError: true
}
1
2
3
4
2
3
4
渲染结果:
绑定的对象可以在data中详细定义,也可以在计算属性中定义。<div v-bind:class="classObject"></div>
data: {
classObject: {
active: true,
'text-danger': false
}
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
计算属性中返回的对象
<div v-bind:class="classObject"></div>
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 数组语法
可以给绑定的class后添加一个数组
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
1
2
3
4
5
2
3
4
5
数组内放的是data数据对象。
数组可以根据条件切换列表中的 class,可以用三元表达式:
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
1
当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法:
<div v-bind:class="[{ activeClass: isActive }, errorClass]"></div>
1
对象语法中,类名class在前,后边是判断。数组语法中,变量在前,后边跟的是类名。数组中可以再次放对象。对象名(类名)在前,数组数(数据)在前
# Vue添加style样式
# 对象语法
v-bind:style的对象语法和css语法类似。因为这里的style是js对象,所以属性要写成驼峰式。
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data:{
activeColor:'red',
fontSize:30
}
1
2
3
4
5
2
3
4
5
使用直接绑定一个样式对象,把样式信息数据写在data中,这样可以让模板更加清晰
<div v-bind:style="styleObject"></div>
data:{
styleObject:{
color:"red",
fontSize:"12px"
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 数组语法
数组语法可以将多个样式对象应用到一个元素上.
<div v-bind:style="[styleObject,baseStyles]"></div>
data:{
styleObject:{
color:"red",
fontSize:"12px"
},
baseStyles:{
fontSize:"18px";
margin:"0px",
padding:"0px"
}
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
编辑 (opens new window)
上次更新: 2024/12/28, 08:35:49