美文网首页
循环多个标签,点击选中,再点击取消

循环多个标签,点击选中,再点击取消

作者: Henry01 | 来源:发表于2023-04-27 15:40 被阅读0次
    实现收藏与取消收藏的效果

    1,html

    item.remark == 'collect' 返回的参数相等时 高亮显示

    ```

    <li

            v-for="(item, index) in tableData.list"

            :key="index"

          >

    <el-icon :class="[item.remark == 'collect'? 'collectActive': isCollection.indexOf(index) > -1]"

                @click.stop="collectSbs(index, item.icao, item)">

                <el-icon-StarFilled />

              </el-icon>

    </li>

    ```

    2,js

    ```

    let isCollection = ref([]);

    //收藏/取消

    const collectSbs = async (i, icao, row) => {

      // 控制收藏图标高亮

      let arrIndex = isCollection.value.indexOf(i);

      if (arrIndex > -1) {

        isCollection.value.splice(arrIndex, 1);

      } else {

        isCollection.value.push(i);

      }

    }

    ```

    3,css

    ```

    .collectActive svg {

      color: #f56c6c;

    }

    ```

    相关文章

      网友评论

          本文标题:循环多个标签,点击选中,再点击取消

          本文链接:https://www.haomeiwen.com/subject/wktijdtx.html