Vue.js中的綁定樣式實(shí)現(xiàn)
綁定class樣式
1、字符串寫(xiě)法
<!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樣式--字符串寫(xiě)法,適用于:樣式類(lèi)名不確定,需動(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ù)組寫(xiě)法
<!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ù)組寫(xiě)法,適用于:要綁定的樣式個(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ì)象寫(xiě)法
<style> .basic { width: 400px; height: 100px; border: 1px solid black } .addOne { background: orange; } .addTwo { font-size: 40px; } </style> <!--綁定class樣式-對(duì)象寫(xiě)法-適用于:綁定樣式個(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寫(xiě)法--> <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ì)象寫(xiě)法:
<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ù)組寫(xiě)法:
<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樣式
- 寫(xiě)法:
class="xxx"
xxx 可以是字符串、對(duì)象、數(shù)組 - 字符串寫(xiě)法適用于:類(lèi)名不確定,要?jiǎng)討B(tài)獲取
- 對(duì)象寫(xiě)法適用于:要綁定多個(gè)樣式,個(gè)數(shù)不確定,名字也不確定
- 數(shù)組寫(xiě)法適用于:要綁定多個(gè)樣式,個(gè)數(shù)確定,名字也確定,但不確定用不用
2、 style樣式 :style="{fontsize: xxx}"
其中xxx是動(dòng)態(tài)值
:style="[a,b]"
其中a、b是樣式對(duì)象
scoped
作用:讓樣式在局部生效,防止沖突 寫(xiě)法::<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-06vue使用動(dòng)態(tài)添加路由(router.addRoutes)加載權(quán)限側(cè)邊欄的方式
這篇文章主要介紹了vue使用動(dòng)態(tài)添加路由(router.addRoutes)加載權(quán)限側(cè)邊欄的方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06Vue實(shí)現(xiàn)面包屑導(dǎo)航的正確方式
面包屑導(dǎo)航(BreadcrumbNavigation)這個(gè)概念來(lái)自童話故事“漢賽爾和格萊特”,它的作用是告訴訪問(wèn)者他們?cè)诰W(wǎng)站中的位置以及如何返回,本文為大家介紹了實(shí)現(xiàn)面包屑導(dǎo)航的正確方式,需要的可以參考一下2023-06-06vue項(xiàng)目中自定義video視頻控制條的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue項(xiàng)目中自定義video視頻控制條的實(shí)現(xiàn)代碼,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04在vue中使用echarts的方法以及可能遇到的問(wèn)題
Echarts是一個(gè)與框架無(wú)關(guān)的JS圖表庫(kù),但是它基于Js,這樣很多框架都能使用它,下面這篇文章主要給大家介紹了關(guān)于在vue中使用echarts的方法以及可能遇到的問(wèn)題的相關(guān)資料,需要的朋友可以參考下2022-09-09vue項(xiàng)目強(qiáng)制清除頁(yè)面緩存的例子
今天小編就為大家分享一篇vue項(xiàng)目強(qiáng)制清除頁(yè)面緩存的例子,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11Vue淺析講解動(dòng)態(tài)組件與緩存組件及異步組件的使用
這篇文章主要介紹了Vue開(kāi)發(fā)中的動(dòng)態(tài)組件與緩存組件及異步組件的使用教程,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09