Vue超简单的动态绑定样式

:class=" 这里面可以是数组形式和对象形式 "

如图

效果

代码如下 

<template>
  <div>
      <div :class="[index === 1 ?'box':'',{'color': index === 1}]">
        <p :class="{'font':true}">改变的字体色彩</p>
      </div>
  </div>
</template>

<script>
export default {
  name: 'stest',
  data () {
    return {
      index:1
    }
  },
  computed: {},
  methods: {

    },
}
</script>

<style>
  .box{
    width: 100px;
    height: 100px;
    border: 1px solid;
  }
  .color{
    font-size: 2em;
  }
  .font{
    color: blue;
  }
</style>