vuejs怎麼改變css

vuejs改變css的方法：1、使用「v-bind:class」或「v-bind:style」指令修改css樣式；2、直接透過操作dom來變更css樣式。

本文操作環境：Windows7系統、vue2.9.6版，DELL G3電腦。

vuejs怎麼改變css？

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

使用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>
 <p>
 <p class=&#39;mycolor&#39; :class="{&#39;colordisplay&#39;:display}"><span>1.1我的对象更改&&绑定test</span></p>
 </p>
</template>
<script>
 export default {
 name: &#39;mytest&#39;,
 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

<p :style=&#39;mypagestyle&#39;><span>1.2我的样式内联更改&&绑定test</span></p>

data

#

mypagestyle:{color: 'yellow',background:"blue"},

1.3:陣列語法：

也可以透過陣列來綁定

v-bind:style='[mycolor1,mycolor2]'

<p :style="[myarr,myarrtest]"><span>1.3我的数组更改&&绑定test</span></p>

 然後設定傳回的資料為

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

2.計算屬性

也可以透過計算屬性計算（適用於較為複雜判斷）樣式

<p class=&#39;computed&#39; :class=&#39;compuretu&#39;>2.计算属性判断</p>

將計算屬性的回傳值作為類別名，透過判斷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>
<p>
<p style=“color: green;” ref="abc"><span>我的test</span></p>
</p>
</template>
<script>
export default {
name: &#39;mytest&#39;,
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）

<script>
 export default {
 name: &#39;mytest&#39;,
 data() {
 return {
 serd:true,
 slid:true,
 mycss: {
  color: &#39;&#39;
 },
 mypagestyle:{
  color: &#39;yellow&#39;,
  background:"blue"
 },
 myarr:{
  color: &#39;white&#39;
 },
 myarrtest:{
  background:&#39;#000&#39;,
  display:&#39;inline&#39;
 },
 display: true
 }
 },
 mounted() {　　
 console.log(this.$refs.abc.style.cssText)
 this.$refs.abc.style.color = &#39;red&#39; //修改属性
 this.$refs.abc.style.background = &#39;black&#39; //新增属性
 this.$refs.abc.style.display = &#39;inline&#39; 
 console.log(111)　
 console.log(this.$refs.abc.style.display)　
 },
 computed: {
 compuretu: function() {
 return {
  compuretu: this.serd && this.slid
 }
 }
 },
 methods:{
 
 }
 }
</script>

當然最後這種方式對於初入門的朋友來講可能會有點理解不透，所以我更建議大家使用前幾種方式

推薦學習：《

vue教學》

以上是vuejs怎麼改變css的詳細內容。更多資訊請關注PHP中文網其他相關文章！