使用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.操作節(jié)點

由于vue本身是虛擬dom如果通過document來進行節(jié)點樣式更改的時候有可能會出現'style' is not definde的錯誤，