前言
本文主要介绍了vue.js 样式绑定的几种形式。
class
字符串形式
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<title>vue样式绑定</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
.red{
color: red;
}
.green{
color: green;
}
</style>
</head>
<body>
<div ></div>
<script>
const app = Vue.createApp({
data(){
return {
classString: 'red'
}
},
template: ` <div :class="classString">vue样式绑定</div>`
})
const vm = app.mount('#root');
</script>
</body>
</html>
页面效果：
对象形式
代码演示：
<div ></div>
<script>
const app = Vue.createApp({
data(){
return {
classString: 'red',
classObject:{
red: true,
green: true
}
}
},
template: ` <div :class="classObject">vue样式绑定</div>`
})
const vm = app.mount('#root');
</script>
页面样式：
数组形式
代码演示：
<div ></div>
<script>
const app = Vue.createApp({
data(){
return {
classString: 'red',
classObject:{
red: true,
green: true
},
classArray:['green']
}
},
template: ` <div :class="classArray">vue样式绑定</div>`
})
const vm = app.mount('#root');
</script>
页面效果：
style
字符串形式
代码演示：
<script>
const app = Vue.createApp({
data(){
return {
styleString:'color: yellow'
}
},
template: ` <div :style="styleString">vue样式绑定</div>`
})
const vm = app.mount('#root');
</script>
页面效果：
对象形式
像
background-color这种中间带-的CSS属性，在JS中要写成backgroundColor，这种驼峰式写法。
代码演示：
<script>
const app = Vue.createApp({
data(){
return {
styleString:'color: yellow',
styleObject:{
color: 'red',
// 驼峰式写法
backgroundColor: 'pink'
}
}
},
template: ` <div :style="styleObject">vue样式绑定</div>`
})
const vm = app.mount('#root');
</script>
页面效果：
组件
默认继承父组件class
代码演示：
<script>
const app = Vue.createApp({
data(){
return {
styleString:'color: yellow',
styleObject:{
color: 'red',
backgroundColor: 'pink'
}
}
},
template: ` <div :style="styleObject">
vue样式绑定
<demo />
</div>`
})
app.component('demo', {
template:`<div>我是子组件</div>`
})
const vm = app.mount('#root');
</script>
页面效果：
子组件内嵌式
子组件只有一个最外层节点
代码演示：
<script>
const app = Vue.createApp({
data(){
return {
styleString:'color: yellow',
styleObject:{
color: 'red',
backgroundColor: 'pink'
}
}
},
template: ` <div :style="styleObject">
vue样式绑定
<demo class="green"/>
</div>`
})
app.component('demo', {
template:`
<div>1</div>`
})
const vm = app.mount('#root');
</script>
页面效果：
子组件有多个最外层节点
代码演示：
<script>
const app = Vue.createApp({
data(){
return {
styleString:'color: yellow',
styleObject:{
color: 'red',
backgroundColor: 'pink'
}
}
},
template: ` <div :style="styleObject">
vue样式绑定
<demo class="green"/>
</div>`
})
app.component('demo', {
template:`
<div>1</div>
<div>2</div>`
})
const vm = app.mount('#root');
</script>
页面效果：
使用$attrs传参
代码演示：
<script>
const app = Vue.createApp({
data(){
return {
styleString:'color: yellow',
styleObject:{
color: 'red',
backgroundColor: 'pink'
}
}
},
template: ` <div :style="styleObject">
vue样式绑定
<demo class="green"/>
</div>`
})
app.component('demo', {
template:`
<div :class="$attrs.class">1</div>
<div>2</div>
`
})
const vm = app.mount('#root');
</script>
页面效果：
结语
本小节到此结束，谢谢大家的观看！
如有问题欢迎各位指正