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