1. 概述
老話說的好：腳踏實(shí)地，從小事做起。
言歸正傳，今天我們來聊聊 VUE3 的樣式綁定。
2. 樣式綁定
2.1 樣式例子
<style>
/* 顏色 */
.color-red {
color: red;
}
/* 字體 */
.font-size-25 {
font-size: 25px;
}
/* 居中 */
.center {
text-align: center;
}
</style>
2.2 直接寫 class 的值
<body>
<div id="myDiv"></div>
</body>
<script>
const app = Vue.createApp({ // 創(chuàng)建一個vue應(yīng)用實(shí)例
template : '<div class="color-red">hello</div>'
});
// vm 就是vue應(yīng)用的根組件
const vm = app.mount('#myDiv'); // 綁定id為 myDiv 的元素
2.3 class 綁定字符串?dāng)?shù)據(jù)
<body>
<div id="myDiv"></div>
</body>
<script>
const app = Vue.createApp({ // 創(chuàng)建一個vue應(yīng)用實(shí)例
data() {
return {
myColor : "color-red"
}
},
template : '<div :class="myColor">hello</div>'
});
const vm = app.mount('#myDiv'); // 綁定id為 myDiv 的元素
2.4 class 綁定對象數(shù)據(jù)
<body>
<div id="myDiv"></div>
</body>
<script>
const app = Vue.createApp({ // 創(chuàng)建一個vue應(yīng)用實(shí)例
data() {
return {
myColorObject : {
"color-red" : true,
"font-size-25" : true
}
}
},
template : '<div :class="myColorObject">hello</div>'
});
const vm = app.mount('#myDiv'); // 綁定id為 myDiv 的元素
myColorObject 對象中，值為 true 代表使用此樣式，為 false 代表不使用
2.5 class 綁定數(shù)組數(shù)據(jù)
<body>
<div id="myDiv"></div>
</body>
<script>
const app = Vue.createApp({ // 創(chuàng)建一個vue應(yīng)用實(shí)例
data() {
return {
myColorArr : ["color-red", "font-size-25" , {center : true}],
}
},
template : '<div :class="myColorArr">hello</div>'
});
const vm = app.mount('#myDiv'); // 綁定id為 myDiv 的元素
myColorArr 數(shù)組中包含的樣式都會被使用
2.6 直接寫 style 的值
<body>
<div id="myDiv"></div>
</body>
<script>
const app = Vue.createApp({ // 創(chuàng)建一個vue應(yīng)用實(shí)例
template : `
<div style="color:yellow;">
hello
</div>
`
});
const vm = app.mount('#myDiv'); // 綁定id為 myDiv 的元素
2.7 style 綁定字符串?dāng)?shù)據(jù)
<body>
<div id="myDiv"></div>
</body>
<script>
const app = Vue.createApp({ // 創(chuàng)建一個vue應(yīng)用實(shí)例
data() {
return {
myStyle : "color:yellow;"
}
},
template : `
<div :style="myStyle">
hello
</div>
`
});
const vm = app.mount('#myDiv'); // 綁定id為 myDiv 的元素
2.8 style 綁定對象數(shù)據(jù)
<body>
<div id="myDiv"></div>
</body>
<script>
const app = Vue.createApp({ // 創(chuàng)建一個vue應(yīng)用實(shí)例
data() {
return {
myStyleObject : {
"color" : "blue",
"font-size": "25px"
}
}
},
template : `
<div :style="myStyleObject">
hello
</div>
`
});
const vm = app.mount('#myDiv'); // 綁定id為 myDiv 的元素
3. 綜述
今天聊了一下 VUE3 的 樣式綁定，希望可以對大家的工作有所幫助
歡迎幫忙點(diǎn)贊、評論、轉(zhuǎn)發(fā)、加關(guān)注 ：）
關(guān)注追風(fēng)人聊Java，每天更新Java干貨。
