Vue.js中的綁定樣式實現(xiàn)
更新時間：2022年05月27日 11:55:18 作者：??奔跑吧雞翅????
這篇文章主要介紹了Vue.js中的綁定樣式實現(xiàn)，展開的內(nèi)容呦style綁定樣式和綁定class樣式，具體相關(guān)內(nèi)容需要的小伙伴可以參考下面文章介紹
綁定class樣式
1、字符串寫法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue初識</title>
<script type="text/javascript" src="./js/vue.js"></script>
<style>
.basic{
width: 400px;
height: 100px;
border:1px solid black
}
.happy{
background: pink;
}
.sad{
background: skyblue;
}
.normal{
background: aquamarine;
}
</style>
</head>
<body>
<div id="root">
<!--綁定class樣式--字符串寫法，適用于：樣式類名不確定，需動態(tài)指定-->
<div class="basic" :class="mood" @click="changeMood">{{name}}</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:"#root",
data:{
name:'好好學(xué)習(xí)',
mood:'normal'
},
methods:{
changeMood(){
const arr = ['happy','sad','normal']
//生成0-2的隨機數(shù)
this.mood = arr[Math.floor(Math.random()*3)]
}
}
})
</script>
</body>
</html>2、數(shù)組寫法
<!DOCTYPE html>
<html lang="en">
<head>
......
<style>
.basic {
width: 400px;
height: 100px;
border: 1px solid black
}
......
.addOne {
background: orange;
}
.addTwo {
font-size: 40px;
}
.addThree {
border-radius: 5px;
}
</style>
</head>
<body>
<div id="root">
......
<!--綁定class樣式--數(shù)組寫法，適用于：要綁定的樣式個數(shù)和名字都不確定-->
<div class="basic" :class="classArr">{{name}}</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el: "#root",
data: {
name: '好好學(xué)習(xí)',
mood: 'normal',
classArr: ['addOne', 'addTwo', 'addThree']
}
......
})
</script>
</body>
</html>3、對象寫法
<style>
.basic {
width: 400px;
height: 100px;
border: 1px solid black
}
.addOne {
background: orange;
}
.addTwo {
font-size: 40px;
}
</style>
<!--綁定class樣式-對象寫法-適用于：綁定樣式個數(shù)確定，名字也確定，但動態(tài)決定用不用-->
<div class="basic" :class="classObj">{{name}}</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:"#root",
data:{
name:"好好學(xué)習(xí)",
classObj:{
addOne:false,
addTwo:true
}
}
})
</script>style 綁定樣式
<!--正常的style寫法-->
<div class="basic" style="font-size: 40px">{{name}}</div>
<!--使用vue展示樣式-->
<div class="basic" :style="{fontSize:fsize+'px'}">{{name}}</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el: "#root",
data: {
name: "好好學(xué)習(xí)",
fsize: 40
}
})
</script>或者使用 style 對象寫法：
<div class="basic" :style="styleObj">{{name}}</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el: "#root",
data: {
name: "好好學(xué)習(xí)",
styleObj:{
fontSize:"30px",
color:"red",
backgroundColor:"orange"
}
}
})
</script>或者 style 數(shù)組寫法：
<div class="basic" :style="[styleObj,styleObj2]">{{name}}</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el: "#root",
data: {
name: "好好學(xué)習(xí)",
styleObj:{
fontSize:"30px",
color:"red"
},
styleObj2:{
backgroundColor:"orange"
}
}
})
</script>綁定樣式
1、class樣式
- 寫法：
class="xxx"xxx 可以是字符串、對象、數(shù)組 - 字符串寫法適用于：類名不確定，要動態(tài)獲取
- 對象寫法適用于：要綁定多個樣式，個數(shù)不確定，名字也不確定
- 數(shù)組寫法適用于：要綁定多個樣式，個數(shù)確定，名字也確定，但不確定用不用
2、 style樣式 :style="{fontsize: xxx}"其中xxx是動態(tài)值
:style="[a,b]"其中a、b是樣式對象
scoped
作用：讓樣式在局部生效，防止沖突 寫法:：<style scoped> 后期在組件中用
到此這篇關(guān)于Vue.js中的綁定樣式實現(xiàn)的文章就介紹到這了,更多相關(guān)Vue綁定樣式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue進階之CodeMirror的應(yīng)用小結(jié)
CodeMirror支持在線編輯代碼，風(fēng)格包括js, java, php, c++等等100多種語言，下面這篇文章主要來和大家講講CodeMirror的應(yīng)用，感興趣的可以了解一下2023-06-06
這篇文章主要介紹了Vant主題定制如何修改顏色樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue使用動態(tài)添加路由(router.addRoutes)加載權(quán)限側(cè)邊欄的方式
這篇文章主要介紹了vue使用動態(tài)添加路由(router.addRoutes)加載權(quán)限側(cè)邊欄的方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這一篇主要是創(chuàng)建一個vue項目并結(jié)合餓了么框架element-ui的文章。文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
面包屑導(dǎo)航(BreadcrumbNavigation)這個概念來自童話故事“漢賽爾和格萊特”，它的作用是告訴訪問者他們在網(wǎng)站中的位置以及如何返回，本文為大家介紹了實現(xiàn)面包屑導(dǎo)航的正確方式，需要的可以參考一下2023-06-06
vue項目中自定義video視頻控制條的實現(xiàn)代碼
這篇文章主要介紹了vue項目中自定義video視頻控制條的實現(xiàn)代碼，本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
這篇文章主要為大家詳細介紹了Vue實現(xiàn)下拉加載更多，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
Echarts是一個與框架無關(guān)的JS圖表庫,但是它基于Js,這樣很多框架都能使用它,下面這篇文章主要給大家介紹了關(guān)于在vue中使用echarts的方法以及可能遇到的問題的相關(guān)資料,需要的朋友可以參考下2022-09-09
今天小編就為大家分享一篇vue項目強制清除頁面緩存的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了Vue開發(fā)中的動態(tài)組件與緩存組件及異步組件的使用教程，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09