<template>
<div>
<div @click="choose(index)"> index 键值(列表的索引值) 代表点击到第几个</div>
<ul class="main">
<!-- 1、li列表循环 lists-->
<!-- 2、创建点击事件choose,带参数键值(列表的索引值)index -->
<!-- 3、添加点击样式active,创建class对象 :class="",
条件一: index == current 列表索引值和记录点击的index参数current相等current:'';
条件二: current !== '' 就是要在点击的情况下,所以current不能为空;
-->
<li v-for="(item,index) in lists"
:key="index"
@click="choose(index)"
:class="{active : index == current && current !== ''}"
>
{
Vue 点击列表 选中后 添加在新列表
最新推荐文章于 2023-07-01 22:33:30 发布
本文介绍如何在Vue应用中实现点击列表项将其选中,并添加到新的列表中,涉及Vue的数据绑定、事件处理和数组操作技巧。
摘要由CSDN通过智能技术生成