使用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的值来控制样式的显示与否
