Vue.js实现点击后动态添加class及删除同级class

需要实现一个按钮点击变色的功能，具体方式是通过vue动态的给被点击的元素添加class名字，使其变色，其他的删除class。
这里用了mu-button按钮组件。

<mu-button round v-for="(type,index) in goodsType" color="#F4F4F4"  @click="selectType(index)" :class="{'on':index==selectTypeIndex}">{{type}}</mu-button>

export default {
        data(){
            return {
                goodsType: ['Preper', 'Electronic', 'Furniture'],
                selectTypeIndex: -1, //控制按钮点亮状态，-1为默认不点亮
            }
        },
        methods: {
            selectType(index){
                this.selectTypeIndex = index;
            }
        }
    }

.on{
       background: #DA2121!important;
       color: #FFFFFF!important;
   }