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>