Vue循环对象（选中不同状态）

最新推荐文章于 2024-06-05 14:26:44 发布

宇智波-林中路

最新推荐文章于 2024-06-05 14:26:44 发布

阅读量2.6k

点赞数

分类专栏： Vue.js 文章标签：前端

本文链接：https://blog.csdn.net/m0_60830137/article/details/125798411

版权

切换选中

摘要由CSDN通过智能技术生成

1.使用Vue循环显示一个对象数组到页面上，并设置索引为0的那一项被默认选中；
2.为默认选中项添加 .active 类样式（红色、加粗字体）；
3.非选中项的默认样式为（蓝色，非加粗字体）；
4. 并且点击不同的列表项，可以切换选中状态；

   <style>
      /* 跟颜色顺序有关 */
      .normal {
        color: blue;
      }
      .active {
        color: red;
        font-weight: bold;
      }
    </style>

 <body>
    <!-- :class= ['normal',{active:index==selectIndex ? true : false}] -->
    <!-- :class="['normal',index==selectIndex ? 'active' : 'normal']" -->
    <div id="app">
      <ul>
        <li
          v-for="(item,index) in list "
          :key="item.id"
          @click="changeIndex(index) "
          :class="['normal',index==selectIndex