# 绑定样式
-
class 样式
-
写法:class="xxx" xxx 可以是字符串、对象、数组。
-
字符串写法适用于：类名不确定，要动态获取。
-
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
-
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
-
style 样式
-
:style="{fontSize: xxx}" 其中 xxx 是动态值。
-
:style="[a,b]" 其中 a、b 是样式对象。
-
# 绑定 class 样式 字符串写法
- 绑定 class 样式 -- 字符串写法，适用于：样式的类名不确定，需要动态指定
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8" /> | |
<title>绑定样式</title> | |
<style> | |
.basic { | |
width: 400px; | |
height: 100px; | |
border: 1px solid black; | |
} | |
.happy { | |
border: 4px solid red; | |
; | |
background-color: rgba(255, 255, 0, 0.644); | |
background: linear-gradient(30deg, yellow, pink, orange, yellow); | |
} | |
.sad { | |
border: 4px dashed rgb(2, 197, 2); | |
background-color: rgb(182, 27, 27); | |
} | |
.normal { | |
background-color: skyblue; | |
} | |
</style> | |
<script type="text/javascript" src="./vue.js"></script> | |
</head> | |
<body> | |
<div id="root"> | |
<div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br /><br /> | |
</div> | |
</body> | |
<script type="text/javascript"> | |
Vue.config.productionTip = false | |
const vm = new Vue({ | |
el: '#root', | |
data: { | |
name: '樱岛麻衣', | |
mood: 'normal', | |
}, | |
methods: { | |
changeMood() { | |
const arr = ['happy', 'sad', 'normal'] | |
this.mood = arr[~~(Math.random() * 3)] | |
} | |
}, | |
}) | |
</script> | |
</html> |
# 绑定 class 样式 数组写法
- 绑定 class 样式 -- 数组写法，适用于：要绑定的样式个数不确定、名字也不确定
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8" /> | |
<title>绑定样式</title> | |
<style> | |
.basic { | |
width: 400px; | |
height: 100px; | |
border: 1px solid black; | |
} | |
.dataColor { | |
color: #fff | |
} | |
.dataFont { | |
font-size: 24px; | |
} | |
.dataBgc { | |
background-color: orange; | |
} | |
</style> | |
<script type="text/javascript" src="./vue.js"></script> | |
</head> | |
<body> | |
<div id="root"> | |
<div class="basic" :class="classArr">{{name}}</div> | |
</div> | |
</body> | |
<script type="text/javascript"> | |
Vue.config.productionTip = false | |
const vm = new Vue({ | |
el: '#root', | |
data: { | |
name: '樱岛麻衣', | |
classArr: ['dataColor', 'dataFont', 'dataBgc'], | |
} | |
}) | |
</script> | |
</html> |
# 绑定 class 样式 对象写法
- 绑定 class 样式 -- 对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8" /> | |
<title>绑定样式</title> | |
<style> | |
.basic { | |
width: 400px; | |
height: 100px; | |
border: 1px solid black; | |
} | |
.dataColor { | |
color: #fff | |
} | |
.dataFont { | |
font-size: 24px; | |
} | |
.dataBgc { | |
background-color: orange; | |
} | |
</style> | |
<script type="text/javascript" src="./vue.js"></script> | |
</head> | |
<body> | |
<div id="root"> | |
<div class="basic" :class="classObj">{{name}}</div> | |
</div> | |
</body> | |
<script type="text/javascript"> | |
Vue.config.productionTip = false | |
const vm = new Vue({ | |
el: '#root', | |
data: { | |
name: '樱岛麻衣', | |
classObj: { | |
'dataColor': true, | |
'dataFont': true, | |
dataBgc: true | |
} | |
} | |
}) | |
</script> | |
</html> |
# 绑定 style 样式 对象写法
- 绑定 style 样式 -- 对象写法 ，属性名默认字符串格式，写不写引号都可以
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8" /> | |
<title>绑定样式</title> | |
<style> | |
.basic { | |
width: 400px; | |
height: 100px; | |
border: 1px solid black; | |
} | |
</style> | |
<script type="text/javascript" src="./vue.js"></script> | |
</head> | |
<body> | |
<div id="root"> | |
<div class="basic" :style="styleObj">{{name}}</div> | |
</div> | |
</body> | |
<script type="text/javascript"> | |
Vue.config.productionTip = false | |
const vm = new Vue({ | |
el: '#root', | |
data: { | |
name: '樱岛麻衣', | |
styleObj: { | |
color: '#fff', | |
fontSize: '24px', | |
backgroundColor: 'orange' | |
} | |
} | |
}) | |
</script> | |
</html> |
# 绑定 style 样式 数组写法
- 绑定 style 样式 -- 数组写法，属性名默认字符串格式，写不写引号都可以
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8" /> | |
<title>绑定样式</title> | |
<style> | |
.basic { | |
width: 400px; | |
height: 100px; | |
border: 1px solid black; | |
} | |
</style> | |
<script type="text/javascript" src="./vue.js"></script> | |
</head> | |
<body> | |
<div id="root"> | |
<div class="basic" :style="styleArr">{{name}}</div> | |
</div> | |
</body> | |
<script type="text/javascript"> | |
Vue.config.productionTip = false | |
const vm = new Vue({ | |
el: '#root', | |
data: { | |
name: '樱岛麻衣', | |
styleArr: [ | |
{ | |
'color': '#fff' | |
}, | |
{ | |
'fontSize': '24px' | |
}, | |
{ | |
'backgroundColor': 'orange' | |
} | |
] | |
} | |
}) | |
</script> | |
</html> |
