v-bind和v-for结合使用动态绑定class

<template>
  <div>
    <ul>
      <li
        v-for="(item,index) in msgData"
        :key="index"
        @click="click(index)"
        :class="{active:select==index}"
      >{{item}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      select: Int8Array,
      msgData: ["海尔", "葫芦娃", "蜘蛛侠", "我是谁"]
    };
  },
  methods: {
    click(index) {
      this.select = index;
      // alert(index)
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.active {
  color: red;
}
</style>