v-for中通过动态绑定class来实现触发效果。

vue动态绑定class练习。
在v-for中：
：class=“{ ‘类名1’：条件表达式，‘类名2’：条件表达式… }”

<template>
  <div class="app-*">
    <ul>
      <li
        v-for="(item,i) of list"
        :key="i"
        class="item"
        @click="clickIndex=i"
        :class="{'click':i==clickIndex}"
      ></li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [1, 2, 3, 4],
      clickIndex: -1
    };
  },
  methods: {}
};
</script>
<style scoped>
.item {
  display: inline-block;
  width: 100px;
  height: 100px;
  cursor: pointer;
  border: 1px solid black;
}
.item:hover {
  background: gray;
}
.item.click {
  background: red;
}
</style>