1. 程式人生 > >v-for中通過動態繫結class來實現觸發效果。

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>