使用v-bind:class或者v-bind:style或者直接通過操作dom來對其樣式進行更改;
1.v-bind:class || v-bind:style
其中v-bind是指令,: 後面的class 和style是參數,而class之後的值在vue的官方文檔裏被稱爲'指令預期值'(這個不必深究,反正個人覺得初學知道他叫啥名有啥用就好了)同v-bind的大多數指令(部分特殊指令如V-for除外)一樣,除了可以綁定字符串類型的變量外,還支持一個單一的js表達式,也就是說v-bind:class的'指令預期值'除了字符串以外還可以是對象或者數組(‘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,那麼此時該部分的class就是 class="mycolor colordisplay",通過設置display的值就可以控制colordisplay的顯示
如果要設置綁定多個class的話就和正常的對象鍵值對一樣中間用逗號隔開就可以了v-bind:class="{'colordisplay':display,'ispay':pay}"
1.2:內聯樣式:
v-bind:style='mycolor'
template
<div :style='mypagestyle'><span>1.2我的樣式內聯更改&&綁定test</span></div>
data
mypagestyle:{color: 'yellow',background:"blue"},
1.3:數組語法:
也可以通過數組來綁定v-bind:style='[mycolor1,mycolor2]'
<div :style="[myarr,myarrtest]"><span>1.3我的數組更改&&綁定test</span></div>
然後設置返回的數據爲
myarr:{color: 'white'},
myarrtest:{background:'#000',display:'inline'},
2.計算屬性
也可以通過計算屬性計算(適用於較爲複雜判斷)樣式
<div class='computed' :class='compuretu'>2.計算屬性判斷</div>
將計算屬性的返回值作爲類名,通過判斷serd和slid的值來控制樣式的顯示與否
data() {
return {serd:true,slid:true}
},
computed: {
compuretu: function() {
return {compuretu: this.serd && this.slid}
}
}
設置樣式
.compuretu{color:white;background: red}
3.操作節點
由於vue本身是虛擬dom如果通過document來進行節點樣式更改的時候有可能會出現'style' is not definde的錯誤,
這個問題的解決方式就必須得對vue 的理解要求更高一層了,它可以通過在vue本身的週期mounted函數裏用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 一個對象,持有已註冊過 ref 的所有子組件(或HTML元素);
使用:在 HTML元素 中,添加ref屬性,然後在JS中通過vm.$refs.屬性來獲取
上述會將style的內容全部輸出(color: green;)
這樣的話對其進行更改就可以對相應的屬性直接更改(this.$refs.abc.style.color=red)
<template>
<div>
<div :class='{mycss}'><span>我的單個class屬性的test</span></div>
<div class='mycolor' :class="{'colordisplay':display}"><span>1.1我的對象更改&&綁定test</span></div>
<div :style='mypagestyle'><span>1.3我的樣式內聯更改&&綁定test</span></div>
<div :style="[myarr,myarrtest]"><span>1.3我的數組更改&&綁定test</span></div>
<div class='computed' :class='compuretu'>2.計算屬性判斷</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>
當然最後這種方式對於初入門的朋友來講可能會有點理解不透,所以我更建議大家使用前幾種方式
種方式。
歡迎大家評論指正