Vue绑定样式，条件渲染，列表渲染

绑定样式

绑定class样式

• 字符串写法
  • 适用于：样式的类名不确定，需要动态指定

        
test
        



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

• 数组写法
  • 适用于：要绑定的样式个数不确定，名字也不确定

data:{
arr:['a1','a2','a3']
}
1
2
3
4
5

• 对象写法
  • 适用于：要绑定的样式个数确定，名字也确定，但要动态决定用不用

data:{
    classObj:{
        a1:false,
        a2:true
    }
}
1
2
3
4
5
6
7

绑定style样式

• 对象写法

data:{
    styleObj:{
        fontSize:'40px',
		color:'red'
    }
}
1
2
3
4
5
6
7

• 数组写法

data:{
    styleObj1:{
        fontSize:'40px',
		color:'red'
    },
    styleObj2:{
         bac
1
2
3
4
5
6
7