Vue.js中的綁定樣式實現(xiàn)
綁定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的隨機(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ù)組寫法,適用于:要綁定的樣式個數(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進(jìn)階之CodeMirror的應(yīng)用小結(jié)
CodeMirror支持在線編輯代碼,風(fēng)格包括js, java, php, c++等等100多種語言,下面這篇文章主要來和大家講講CodeMirror的應(yīng)用,感興趣的可以了解一下2023-06-06vue使用動態(tài)添加路由(router.addRoutes)加載權(quán)限側(cè)邊欄的方式
這篇文章主要介紹了vue使用動態(tài)添加路由(router.addRoutes)加載權(quán)限側(cè)邊欄的方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-06-06vue項目中自定義video視頻控制條的實現(xiàn)代碼
這篇文章主要介紹了vue項目中自定義video視頻控制條的實現(xiàn)代碼,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04