Vue语法：类名和样式绑定
生活随笔
收集整理的這篇文章主要介紹了
Vue语法：类名和样式绑定
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
Vue語(yǔ)法：類名和樣式綁定
- 雖然類名class和樣式style接收的類型都是字符串，但實(shí)際上類名是由數(shù)組拼接而成，而樣式是由對(duì)鍵值對(duì)拼接而成。
為了方便，我將代碼寫(xiě)在了一起
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>類名和樣式綁定</title><style>.color-gray{color: gray;}.size-18{font-size: 18px;}.style-italic{font-style: italic;}</style> </head> <body> <div id="app">類名綁定：<p class="color-gray size-18 style-italic">vue2.0,精誠(chéng)所至，金石為開(kāi)</p><p :class="classStr">vue2.0,精誠(chéng)所至，金石為開(kāi)</p><p :class="classArr">vue2.0,精誠(chéng)所至，金石為開(kāi)</p><p :class="classObj1">vue2.0,精誠(chéng)所至，金石為開(kāi)</p><p :class="classObj2">vue2.0,精誠(chéng)所至，金石為開(kāi)</p>樣式綁定：<p style="color:gray;font-size:18px;font-style:italic;">vue2.0,精誠(chéng)所至，金石為開(kāi)</p><p :style="styleStr">vue2.0,精誠(chéng)所至，金石為開(kāi)</p><p :style="styleObj1">vue2.0,精誠(chéng)所至，金石為開(kāi)</p><p :style="styleObj2">vue2.0,精誠(chéng)所至，金石為開(kāi)</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script> <script>new Vue({el:'#app',data(){return{/*類名綁定*/classStr:'color-gray size-18 style-italic', //拼接字符串classArr:['color-gray','size-18','style-italic'], //數(shù)組classObj1:{//對(duì)象綁定類名'color-gray':true,'size-18':true,'style-italic':true},classObj2:{//對(duì)象 ,未綁定類名'color-gray':0,'size-18':'','style-italic':false},/*樣式綁定*/styleStr:'color:gray;font-size:18px;font-style:italic;',//拼接字符串styleObj1:{//對(duì)象綁定樣式'color':-1 ? 'gray' : 'yellow','font-size':[] ? '18px' : '','font-style':'italic'},styleObj2:{//對(duì)象，未綁定樣式'color':0 ? 'gray' : '','font-size':'' ? '18px' : '','font-style':null ? 'italic' : ''}}}}); </script> </body> </html>小白一枚，如有問(wèn)題，請(qǐng)多多指教😃
總結(jié)
以上是生活随笔為你收集整理的Vue语法：类名和样式绑定的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： hadoop(hdfs)常见面试题
- 下一篇： vue通过class获取dom_.NET