vue中class渲染颜色 多种只取一种

有的时候需要多种状态但是颜色不一样这时候很苦恼,在百度上查到的都是模棱两可,所以我吧我的总结的一种方法献给大家:

<template>
  <div class="hello">
      <button @click="addFn">提交</button>
    <h1>{{msg}}</h1>
    <p :class="[sum[index]]">颜色</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg:0,
      sum:['red','blue','green','yellow','cyan'],
      index:0
    }
  },
  methods:{
    addFn(){
        if (this.msg==4){
          return;
        }else {
          this.msg++;
          this.index =this.msg;
        }
    }
  }
}
</script>
<style scoped>
  .red{
    color:red;
  }
  .blue{
    color:blue;
  }
  .green{
    color:green;
  }
  .yellow{
    color: yellow;
  }
  .cyan{
    color:cyan;
  }

</style>

我们先定义所需要的颜色,把颜色装进一个数组,在把定义好的数据放在:class中然后定义个下标 根据所需赋值 或者转成对应的下标就可以实现相应的颜色了