VUE案例3：点击激活列表选中高度状态

本文VUE案例3：点击激活列表选中高度状态，列表默认黑色，点击时呈现出红色。

效果如下：

实现思路：

1、使用v-for遍历数组生成多个li列表

2、同时获取数据和索引

3、使用@click绑定函数传入当前li的索引

4、在函数中将当前索引值赋值给currentIndex变量

5、使用:class添加样式

代码如下：

template

<template>
  <div class="demo">
    <ul>
      <li v-for="(item, index) in films" @click="liClick(index)" :class="{ active: currentIndex == index }">{{ item }}
      </li>
    </ul>
  </div>
</template>

script

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      films: ["大话西游", "重庆森林", "海上钢琴师", "功夫"]
    }
  },
  methods: {
    liClick(index) {
      this.currentIndex = index;
    }
  }
};
</script>

style

<style>
.demo ul li{
  text-align: left;
}
.active {
  color: red;
  cursor: pointer;
}
</style>