您好,登錄后才能下訂單哦!
vue中怎么綁定行間樣式style,很多新手對(duì)此不是很清楚,為了幫助大家解決這個(gè)難題,下面小編將為大家詳細(xì)講解,有這方面需求的人可以來(lái)學(xué)習(xí)下,希望你能有所收獲。
一、綁定class屬性的方式
1、通過(guò)數(shù)組的方式,為元素綁定多個(gè)class
<style> .red { color:red; /*color:#ff8800;*/ } .bg { background: #000; /*background: green;*/ } </style> window.onload = function(){ var c = new Vue({ el : '#box', data : { red_color : 'red', bg_color : 'bg' } }); } <div id="box"> <span :class="[red_color,bg_color]">this is a test string</span> </div>
上例為span 綁定2個(gè)class,通過(guò)設(shè)定red_color和bg_color的值,找到對(duì)應(yīng)的class類名
2、通過(guò)控制class的true或者false,來(lái)使用對(duì)應(yīng)的class類名, true: 使用該class, false: 不使用該class
<style> .red { color:red; } .bg { background: #000; } </style> window.onload = function(){ var c = new Vue({ el : '#box', data : { } }); } <div id="box"> <span :class="{red:true,bg:true}">this is a test string</span> </div>
3、這種方式,跟第二種差不多,只不過(guò)是把class的狀態(tài)true/false用變量來(lái)代替
<style> .red { color:red; } .bg { background: #000; } </style> window.onload = function(){ var c = new Vue({ el : '#box', data : { r : true, b : false } }); } <div id="box"> <span :class="{red:r,bg:b}">this is a test string</span> </div>
4、為class屬性綁定整個(gè)json對(duì)象
<style> .red { color:red; } .bg { background: #000; } </style> window.onload = function(){ var c = new Vue({ el : '#box', data : { json : { red : true, bg : false } } }); } <div id="box"> <span :class="json">this is a test string</span> </div>
二、綁定style行間樣式的多種方式
1、使用json格式,直接在行間寫(xiě)
window.onload = function(){ var c = new Vue({ el : '#box', }); } <div id="box"> <span :>this is a test string</span> </div>
2、把data中的對(duì)象,作為數(shù)組的某一項(xiàng),綁定到style
window.onload = function(){ var c = new Vue({ el : '#box', data : { c : { color : 'green' } } }); } <div id="box"> <span :>this is a test string</span> </div>
3、跟上面的方式差不多,只不過(guò)是為數(shù)組設(shè)置了多個(gè)對(duì)象
window.onload = function(){ var c = new Vue({ el : '#box', data : { c : { color : 'green' }, b : { background : '#ff8800' } } }); }
<div id="box"> <span :>this is a test string</span> </div>
4、直接把data中的某個(gè)對(duì)象,綁定到style
window.onload = function(){ var c = new Vue({ el : '#box', data : { a : { color:'yellow', background : '#000' } } }); }
<div id="box"> <span :>this is a test string</span> </div>
看完上述內(nèi)容是否對(duì)您有幫助呢?如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章,請(qǐng)關(guān)注億速云行業(yè)資訊頻道,感謝您對(duì)億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。