如何通过动态更改vue中的样式？

通过使用v-bind绑定class和style动态的改变DOM元素的样式。v-bind的基本用法以及它的语法糖，它主要用法是动态更新HTML元素上的属性。

绑定class的几种方式

1.对象语法

给v-bind:class设置一个对象，可以动态地切换class。例如：

<div id="app">
  <div :class="{'active': isActive}"></div>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      isActive: true
    }
  })
</script>

对象中也可以传入多个参数，来动态地切换class，:class可以和普通class同存。

<div id="app">
 <div :class="{'active': isActive, 'error': isError}"></div>
</div>

<script>
 var app = new Vue({
   el: '#app',
   data: {
     isActive: true,
     isError: false
   }
 })
</script>

当:class的表达式过长或逻辑复杂时，还可以绑定一个计算属性。