您好,登錄后才能下訂單哦!
使用v-bind:class或者v-bind:style或者直接通過操作dom來對其樣式進(jìn)行更改;
1.v-bind:class || v-bind:style
其中v-bind是指令,: 后面的class 和style是參數(shù),而class之后的指在vue的官方文檔里被稱為'指令預(yù)期值'(這個(gè)不必深究,反正個(gè)人覺得初學(xué)知道他叫啥名有啥用就好了)同v-bind的大多數(shù)指令(部分特殊指令如V-for除外)一樣,除了可以綁定字符串類型的變量外,還支持一個(gè)單一的js表達(dá)式,也就是說v-bind:class的'指令預(yù)期值'除了字符串以外還可以是對象或者數(shù)組(‘v-bind:'中的v-bind可省略)。
1.1:對象語法:
通過對象來綁定v-bind:class=“{'css類名':控制是否顯示(true or false)}”
<template> <div> <div class='mycolor' :class="{'colordisplay':display}"><span>1.1我的對象更改&&綁定test</span></div> </div> </template> <script> export default { name: 'mytest', data() { return { display: true } }, mounted() {}, computed: {}, methods:{} } </script> <style> .colordisplay { display: inline; background: red; border: 1px solid blue } </style>
如果display為true,那么此時(shí)該部分的class就是 class="mycolor colordisplay",
通過設(shè)置display的值就可以控制colordisplay的顯示
如果要設(shè)置綁定多個(gè)class的話就和正常的對象鍵值對一樣中間用逗號隔開就可以了v-bind:class="{'colordisplay':display,'ispay':pay}"
1.2:內(nèi)聯(lián)樣式:
v-bind:style='mycolor'
template
<div :style='mypagestyle'><span>1.2我的樣式內(nèi)聯(lián)更改&&綁定test</span></div>
data
mypagestyle:{color: 'yellow',background:"blue"},
1.3:數(shù)組語法:
也可以通過數(shù)組來綁定v-bind:style='[mycolor1,mycolor2]'
<div :><span>1.3我的數(shù)組更改&&綁定test</span></div>
然后設(shè)置返回的數(shù)據(jù)為
myarr:{color: 'white'}, myarrtest:{background:'#000',display:'inline'},
2.計(jì)算屬性
也可以通過計(jì)算屬性計(jì)算(適用于較為復(fù)雜判斷)樣式
<div class='computed' :class='compuretu'>2.計(jì)算屬性判斷</div>
將計(jì)算屬性的返回值作為類名,通過判斷serd和slid的值來控制樣式的顯示與否
data() { return {serd:true,slid:true} }, computed: { compuretu: function() { return {compuretu: this.serd && this.slid} } }
設(shè)置樣式
.compuretu{color:white;background: red}
3.操作節(jié)點(diǎn)
由于vue本身是虛擬dom如果通過document來進(jìn)行節(jié)點(diǎn)樣式更改的時(shí)候有可能會出現(xiàn)'style' is not definde的錯(cuò)誤,
這個(gè)問題的解決方式就必須得對vue 的理解要求更高一層了,它可以通過在vue本身的周期mounted函數(shù)里用ref和$refs 來獲取樣式,來完成對其樣式的更改:示例如下:
<template> <div> <div style=“color: green;” ref="abc"><span>我的test</span></div> </div> </template> <script> export default { name: 'mytest', data() { return {} }, mounted() {console.log(this.$refs.abc.style.cssText)} } <script> <style> </style>
說明:
1.ref被用來給元素(子組件)注冊引用信息;
2.vm.$refs 一個(gè)對象,持有已注冊過 ref 的所有子組件(或HTML元素);
使用:在 HTML元素 中,添加ref屬性,然后在JS中通過vm.$refs.屬性來獲取
上述會將style的內(nèi)容全部輸出(color: green;)
這樣的話對其進(jìn)行更改就可以對相應(yīng)的屬性直接更改(this.$refs.abc.style.color=red
)
<template> <div> <div :class='{mycss}'><span>我的單個(gè)class屬性的test</span></div> <div class='mycolor' :class="{'colordisplay':display}"><span>1.1我的對象更改&&綁定test</span></div> <div :style='mypagestyle'><span>1.3我的樣式內(nèi)聯(lián)更改&&綁定test</span></div> <div :><span>1.3我的數(shù)組更改&&綁定test</span></div> <div class='computed' :class='compuretu'>2.計(jì)算屬性判斷</div> <div ref="abc"><span>3.我的dom更改test</span></div> </div> </template> <script> export default { name: 'mytest', data() { return { serd:true, slid:true, mycss: { color: '' }, mypagestyle:{ color: 'yellow', background:"blue" }, myarr:{ color: 'white' }, myarrtest:{ background:'#000', display:'inline' }, display: true } }, mounted() { console.log(this.$refs.abc.style.cssText) this.$refs.abc.style.color = 'red' //修改屬性 this.$refs.abc.style.background = 'black' //新增屬性 this.$refs.abc.style.display = 'inline' console.log(111) console.log(this.$refs.abc.style.display) }, computed: { compuretu: function() { return { compuretu: this.serd && this.slid } } }, methods:{ } } </script> <style> .mycss { color: blue } .colordisplay { display: inline; background: red; border: 1px solid blue } .mycolor { color: orange } .computed { border: 1px solid yellow } .compuretu{ color:white; background: red; } </style>
當(dāng)然最后這種方式對于初入門的朋友來講可能會有點(diǎn)理解不透,所以我更建議大家使用前幾種方式
總結(jié)
以上所述是小編給大家介紹的Vue.js中對css的操作(修改)具體方式詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。