使用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)}”
1.1我的对象更改&&绑定test
export default {
name: 'mytest',
data() {
return {
display: true
}
},
mounted() {},
computed: {},
methods:{}
}
.colordisplay {
display: inline;
background: red;
border: 1px solid blue
}