vue点击元素该元素高亮显示

最新推荐文章于 2024-09-07 10:00:12 发布

原创最新推荐文章于 2024-09-07 10:00:12 发布 · 2.7k 阅读

2 ·

CC 4.0 BY-SA版权

笔记同时被 2 个专栏收录

16 篇文章

订阅专栏

vue

8 篇文章

订阅专栏

本文介绍了一种使用Vue.js实现导航条中当前选中项高亮显示的方法。通过在<li>元素上绑定class属性，并利用v-for指令遍历classInfo数组，根据当前激活索引与数组下标的对比来决定是否应用'active'类。

<!-- 利用绑定class属性的方法，来判断当前点击的索引是哪个 -->
<li
  v-for="(item,index) in classInfo"
  :key="index"
  :class="{active: isActive==index}"
  @click="isActive=index">
  {{item.value}}
</li>





<script>
export default {
  data () {
    return {
      isActive: undefined,
    }
  }
}
</script>