动态的绑定class

<template> 
   <div class="pay">
      <div class="pay-container" v-for="(list,index) in payconfigEntities"
           v-bind:class="{colorChange:index==dynamic}" direction="column"
           @click="getMoney(index)">
        <div class="pay-money">{{list.effect}}</div>
        <div class="pay-time">{{list.duration}}分钟{{list.money}}元</div>
      </div>
    </div>
</template>
<script>
  export default {
    name: "Home",
    data() {
      return {
payconfigEntities:[{"duration":6,"effect":"缓解疲劳","money":4},{"duration":6,"effect":"缓解疲劳","money":4},{"duration":6,"effect":"缓解疲劳","money":4}],
dynamic:-1,
        }
    },
  methods: {
     getMoney: function (index) {
        console.log(index);
        //点击添加字体颜色，其他的删除class名称
        this.dynamic = index; }
    },
}
</script>
<style scoped>
  .colorChange {
    background-color: orange;
  }
</style>

参考：https://blog.csdn.net/qq_40039641/article/details/79013381