vue动态绑定样式

1. 通过class绑定

template中

<div class="test" :class="{ 'choose' : chooseId === item.id }" v-for="item in data" :key="item.id" @click="choose(item.id)">
      {{item.text}}
</div>

js中

data() {
      return {
            data: [
                  {id: 1, text: '111'},
                  {id: 2, text: '222'},
            ]
            chooseId: null, // 初始化一个变量，通过点击某个item，赋值item.id给这个变量进行class对应的绑定
      },

      methods: {
            choose(id) {
                  this.chooseId = id; // 被选中的单项      
            }
      }
}