快捷導(dǎo)航

Vue.js中對(duì)css的操作（修改）具體方式詳解

更新時(shí)間：2018年10月30日 14:48:31 作者：譚少居然

使用v-bind：class或者v-bind:style或者直接通過(guò)操作dom來(lái)對(duì)其樣式進(jìn)行更改；接下來(lái)通過(guò)本文給大家分享Vue.js中對(duì)css的操作（修改）具體方式，感興趣的朋友跟隨小編一起看看吧

使用v-bind：class或者v-bind:style或者直接通過(guò)操作dom來(lái)對(duì)其樣式進(jìn)行更改；

1.v-bind:class || v-bind:style

其中v-bind是指令，: 后面的class 和style是參數(shù)，而class之后的指在vue的官方文檔里被稱(chēng)為'指令預(yù)期值'（這個(gè)不必深究，反正個(gè)人覺(jué)得初學(xué)知道他叫啥名有啥用就好了）同v-bind的大多數(shù)指令（部分特殊指令如V-for除外）一樣，除了可以綁定字符串類(lèi)型的變量外，還支持一個(gè)單一的js表達(dá)式，也就是說(shuō)v-bind：class的'指令預(yù)期值'除了字符串以外還可以是對(duì)象或者數(shù)組（‘v-bind：'中的v-bind可省略）。

1.1:對(duì)象語(yǔ)法：

通過(guò)對(duì)象來(lái)綁定v-bind:class=“{'css類(lèi)名':控制是否顯示（true or false)}”

<template>
 <div>
 <div class='mycolor' :class="{'colordisplay':display}"><span>1.1我的對(duì)象更改&&綁定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",通過(guò)設(shè)置display的值就可以控制colordisplay的顯示

如果要設(shè)置綁定多個(gè)class的話(huà)就和正常的對(duì)象鍵值對(duì)一樣中間用逗號(hào)隔開(kāi)就可以了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ù)組語(yǔ)法：

也可以通過(guò)數(shù)組來(lái)綁定v-bind:style='[mycolor1,mycolor2]'

<div :style="[myarr,myarrtest]"><span>1.3我的數(shù)組更改&&綁定test</span></div>

然后設(shè)置返回的數(shù)據(jù)為

myarr:{color: 'white'},
myarrtest:{background:'#000',display:'inline'},

2.計(jì)算屬性

也可以通過(guò)計(jì)算屬性計(jì)算（適用于較為復(fù)雜判斷）樣式

<div class='computed' :class='compuretu'>2.計(jì)算屬性判斷</div>

將計(jì)算屬性的返回值作為類(lèi)名，通過(guò)判斷serd和slid的值來(lái)控制樣式的顯示與否

 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如果通過(guò)document來(lái)進(jìn)行節(jié)點(diǎn)樣式更改的時(shí)候有可能會(huì)出現(xiàn)'style' is not definde的錯(cuò)誤，

這個(gè)問(wèn)題的解決方式就必須得對(duì)vue 的理解要求更高一層了，它可以通過(guò)在vue本身的周期mounted函數(shù)里用ref和$refs 來(lái)獲取樣式，來(lái)完成對(duì)其樣式的更改：示例如下：

<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>

說(shuō)明：

1.ref被用來(lái)給元素（子組件）注冊(cè)引用信息；

2.vm.$refs 一個(gè)對(duì)象，持有已注冊(cè)過(guò) ref 的所有子組件（或HTML元素）；

使用：在 HTML元素中，添加ref屬性，然后在JS中通過(guò)vm.$refs.屬性來(lái)獲取

上述會(huì)將style的內(nèi)容全部輸出（color: green;）

這樣的話(huà)對(duì)其進(jìn)行更改就可以對(duì)相應(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我的對(duì)象更改&&綁定test</span></div>
 <div :style='mypagestyle'><span>1.3我的樣式內(nèi)聯(lián)更改&&綁定test</span></div>
 <div :style="[myarr,myarrtest]"><span>1.3我的數(shù)組更改&&綁定test</span></div>
 <div class='computed' :class='compuretu'>2.計(jì)算屬性判斷</div>
 <div style="color: green;" 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)然最后這種方式對(duì)于初入門(mén)的朋友來(lái)講可能會(huì)有點(diǎn)理解不透，所以我更建議大家使用前幾種方式

總結(jié)

以上所述是小編給大家介紹的Vue.js中對(duì)css的操作（修改）具體方式詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: