vue中使用双重v-for循环列表，点击元素设置active样式

最新推荐文章于 2023-02-10 17:28:07 发布
最新推荐文章于 2023-02-10 17:28:07 发布
阅读量1.3k 收藏 4
点赞数 2
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37833344/article/details/122123137
版权

在这里插入图片描述
html结构

        <div class="header">
          <dl v-for="(item,parentIndex) in mediaData" :key="parentIndex">
            <dt>{{item.itemname}}:</dt>
            <dd>
              <a href="javascript:;" @click="addStyle(childIndex,parentIndex)" v-for="(val,childIndex) in item.skus" :key="childIndex" :class="{ 'active':childIndex === mediaData[parentIndex].selected }">{{val.catname}}</a>
            </dd>
          </dl>
        </div>

后端数据格式

{
    "code": 200,
    "result": [
        {
            "itemname": "媒体类型",
            "skus": [
                {
                    "cat_id": 0,
                    "catname": "不限"
                },
                {
                    "cat_id": "61",
                    "catname": "新闻资讯"
                },
                {
                    "cat_id": "62",
                    "catname": "财经商业"
                },
                {
                    "cat_id": "63",
                    "catname": "IT-科技"
                },
                {
                    "cat_id": "65",
                    "catname": "女性时尚"
                },
                {
                    "cat_id": "71",
                    "catname": "房产家居"
                },
                {
                    "cat_id": "64",
                    "catname": "母婴亲子"
                },
                {
                    "cat_id": "70",
                    "catname": "汽车媒体"
                },
                {
                    "cat_id": "84",
                    "catname": "娱乐休闲"
                },
                {
                    "cat_id": "68",
                    "catname": "游戏动漫"
                },
                {
                    "cat_id": "79",
                    "catname": "体育频道"
                },
                {
                    "cat_id": "82",
                    "catname": "健康医疗"
                },
                {
                    "cat_id": "83",
                    "catname": "教育培训"
                },
                {
                    "cat_id": "73",
                    "catname": "食品餐饮"
                },
                {
                    "cat_id": "69",
                    "catname": "机械工业能源"
                },
                {
                    "cat_id": "72",
                    "catname": "艺术媒体"
                },
                {
                    "cat_id": "74",
                    "catname": "服装家纺"
                },
                {
                    "cat_id": "75",
                    "catname": "建材媒体"
                },
                {
                    "cat_id": "67",
                    "catname": "酒店旅游"
                },
                {
                    "cat_id": "76",
                    "catname": "珠宝媒体"
                },
                {
                    "cat_id": "80",
                    "catname": "社会公益"
                },
                {
                    "cat_id": "81",
                    "catname": "酒水茶叶"
                },
                {
                    "cat_id": "85",
                    "catname": "生活消费"
                },
                {
                    "cat_id": "78",
                    "catname": "其他"
                }
            ]
        },
        {
            "itemname": "综合门户",
            "skus": [
                {
                    "cat_id": 0,
                    "catname": "不限"
                },
                {
                    "cat_id": "30",
                    "catname": "综合门户"
                },
                {
                    "cat_id": "31",
                    "catname": "中央媒体"
                },
                {
                    "cat_id": "32",
                    "catname": "地方门户"
                },
                {
                    "cat_id": "33",
                    "catname": "垂直媒体"
                },
                {
                    "cat_id": "34",
                    "catname": "报业媒体"
                },
                {
                    "cat_id": "35",
                    "catname": "中小媒体"
                },
                {
                    "cat_id": "36",
                    "catname": "自媒体"
                }
            ]
        },
        {
            "itemname": "地区",
            "skus": [
                {
                    "cat_id": 0,
                    "catname": "不限"
                },
                {
                    "cat_id": "2",
                    "catname": "全国"
                },
                {
                    "cat_id": "3",
                    "catname": "北京"
                },
                {
                    "cat_id": "4",
                    "catname": "上海"
                },
                {
                    "cat_id": "5",
                    "catname": "广东"
                },
                {
                    "cat_id": "6",
                    "catname": "浙江"
                },
                {
                    "cat_id": "7",
                    "catname": "天津"
                },
                {
                    "cat_id": "8",
                    "catname": "重庆"
                },
                {
                    "cat_id": "9",
                    "catname": "湖南"
                },
                {
                    "cat_id": "23",
                    "catname": "湖北"
                },
                {
                    "cat_id": "22",
                    "catname": "福建"
                },
                {
                    "cat_id": "21",
                    "catname": "安徽"
                },
                {
                    "cat_id": "10",
                    "catname": "河北"
                },
                {
                    "cat_id": "12",
                    "catname": "四川"
                },
                {
                    "cat_id": "14",
                    "catname": "江苏"
                },
                {
                    "cat_id": "11",
                    "catname": "河南"
                },
                {
                    "cat_id": "16",
                    "catname": "辽宁"
                },
                {
                    "cat_id": "17",
                    "catname": "吉林"
                },
                {
                    "cat_id": "29",
                    "catname": "山东"
                },
                {
                    "cat_id": "24",
                    "catname": "陕西"
                },
                {
                    "cat_id": "18",
                    "catname": "甘肃"
                },
                {
                    "cat_id": "13",
                    "catname": "山西"
                },
                {
                    "cat_id": "19",
                    "catname": "青海"
                },
                {
                    "cat_id": "20",
                    "catname": "海南"
                },
                {
                    "cat_id": "25",
                    "catname": "广西"
                },
                {
                    "cat_id": "26",
                    "catname": "贵州"
                },
                {
                    "cat_id": "15",
                    "catname": "江西"
                },
                {
                    "cat_id": "27",
                    "catname": "黑龙江"
                },
                {
                    "cat_id": "28",
                    "catname": "云南"
                },
                {
                    "cat_id": "31",
                    "catname": "内蒙古"
                },
                {
                    "cat_id": "30",
                    "catname": "新疆"
                },
                {
                    "cat_id": "32",
                    "catname": "西藏"
                },
                {
                    "cat_id": "33",
                    "catname": "其他地区"
                },
                {
                    "cat_id": "34",
                    "catname": "宁夏"
                },
                {
                    "cat_id": "35",
                    "catname": "台湾"
                }
            ]
        },
        {
            "itemname": "价格区间",
            "skus": [
                {
                    "cat_id": "0,100000000",
                    "catname": "不限"
                },
                {
                    "cat_id": "0,40",
                    "catname": "0~40元"
                },
                {
                    "cat_id": "40,70",
                    "catname": "40~70元"
                },
                {
                    "cat_id": "70,120",
                    "catname": "70~120元"
                },
                {
                    "cat_id": "120,100000",
                    "catname": "120元以上"
                }
            ]
        },
        {
            "itemname": "收录参考",
            "skus": [
                {
                    "cat_id": 0,
                    "catname": "不限"
                },
                {
                    "cat_id": "15",
                    "catname": "网页收录"
                },
                {
                    "cat_id": "14",
                    "catname": "新闻收录"
                }
            ]
        },
        {
            "itemname": "可发媒体",
            "skus": [
                {
                    "cat_id": 0,
                    "catname": "不限"
                },
                {
                    "cat_id": "24",
                    "catname": "出稿快"
                },
                {
                    "cat_id": "10",
                    "catname": "微商"
                },
                {
                    "cat_id": "20",
                    "catname": "股票"
                },
                {
                    "cat_id": "22",
                    "catname": "加盟"
                },
                {
                    "cat_id": "15",
                    "catname": "理财"
                },
                {
                    "cat_id": "26",
                    "catname": "医疗"
                },
                {
                    "cat_id": "7",
                    "catname": "P2P"
                },
                {
                    "cat_id": "21",
                    "catname": "美容护肤"
                },
                {
                    "cat_id": "19",
                    "catname": "可首发"
                },
                {
                    "cat_id": "23",
                    "catname": "可带署名"
                },
                {
                    "cat_id": "11",
                    "catname": "周六可发"
                },
                {
                    "cat_id": "25",
                    "catname": "易上相关"
                },
                {
                    "cat_id": "17",
                    "catname": "根据媒体属性"
                }
            ]
        },
        {
            "itemname": "链接类型",
            "skus": [
                {
                    "cat_id": 0,
                    "catname": "不限"
                },
                {
                    "cat_id": "4",
                    "catname": "微信/二维码"
                },
                {
                    "cat_id": "6",
                    "catname": "可带网址"
                },
                {
                    "cat_id": "8",
                    "catname": "媒体安排"
                }
            ]
        }
    ],
    "msg": "数据请求成功"
}

处理方法

    addStyle(childIndex, parentIndex) {
      this.mediaData[parentIndex].selected = childIndex
    }

json格式处理

    mediaCategory().then(res => {
      let resData = res.result
      resData.forEach(item => {
        item.selected = 0  //添加默认值0
      })
      this.mediaData = resData
    })
WeakSet
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中v-for循环选中点击的元素并对该元素添加样式操作
11-20
相信大家都会遇到这种情况：v-for循环时，我只需要点击到的元素做出相应反应，其他的元素不变；但是往往所有v-for循环出的元素都会变化。如下面的代码：我需要点击到的元素添加一个类样式，其他元素不变，但是这样会导致所有的元素都会变化 html： {{item.name}} css： .addclass{ color : red; } js： data:{ items :[
vue选中点击的元素_vue中v-for循环选中点击的元素并对该元素添加样式操作
weixin_39639096的博客
12-20 720
相信大家都会遇到这种情况：v-for循环时，我只需要点击到的元素做出相应反应，其他的元素不变；但是往往所有v-for循环出的元素都会变化。如下面的代码：我需要点击到的元素添加一个类样式，其他元素不变，但是这样会导致所有的元素都会变化html：{{item.name}}css：.addclass{color : red;}js：data:{items :[{name ：'apple',price: ...
vue的v-for循环中单独给元素设置点击事件的样式
weixin_68658847的博客
02-10 2972
vue的v-for循环中单独给元素设置点击事件的样式
vue实现点击某个v-for遍历的数据，改变其样式。
WQ的技术分享
11-21 3441
这里写自定义目录标题vue实现点击某个v-for遍历的数据，改变其样式。前言二、使用步骤总结 vue实现点击某个v-for遍历的数据，改变其样式。 前言 如下图，点击了胜负十四场，文字加粗了，添加了下划线。 二、使用步骤 这里class属性，用一个三元运算符判断，如果xzindex=index的话，那么选择listzh样式，否则的话，先择listxx样式，用:data-index="index"传入数据，当然如果只是传索引的话直接@click="dianjilist(index)"就可以了，然后方法里面接
Vue 通过for循环出来的标签，只改变其中的某一个样式
qq_37167086的博客
03-03 6479
场景:项目中点击表格的某一个内容，按照该内容的属性进行排序，排序时需要改变排序的样式 <tr> <th v-for="(item,i) in tableHeadData" @click="decChange(item.value,i)" ref="decChange" class="sortable both" :value='item.value' :key="...
vue中使用双重v-for循环列表，点击元素设置active样式，并且互不影响
fuhegegnw的博客
06-24 3424
先上效果图 思路剖析 1.给第一层级添加字段showFlag，默认值都为0 2.在切换方法中传入第一和第二层级的index,将对应外层级的showFlag的值等于内层级的index 3.在视图中的内层循环动态设置class,该class的满足条件：内层index === 外层数组list[parentIndex].showFlag 上代码 <div class="system-item" v-for="(data,parentIndex) in dataDiskList"> &
Vue的v-for双层循环
leilei__66的博客
03-27 1万+
vue的v-for双层循环 结构嵌套的父子循环 item表示当前的数据，index表示索引 key的作用：帮助Vue区分不同的元素，从而提高性能 in 后面表示遍历的数组 <div id="app"> <ul v-for="(item, index) in list1" :key="index"> <li v-for="(i, d) in item.listitem" :key="d">{{i.name}}</li>
vue多重for循环怎么点击改变样式
wwf1225的博客
05-21 3198
vue多重for循环怎么点击改变样式 问题对人有帮助，内容完整，我也想知道答案1问题没有实际价值，缺少关键内容，没有改进余地 <tbody v-for="(item,index) in moduleList"> <tr> <td v-html="modu...
使用Vue中 v-for循环列表控制按钮隐藏显示功能
10-17
在Vue.js中，`v-for`指令用于遍历数组或对象，生成一组DOM元素。它是一种非常强大的功能，常用于动态渲染...希望本文对理解和使用Vue中`v-for`循环列表控制按钮隐藏显示功能有所帮助，如果有更多问题，欢迎继续探讨。
Vue v-for循环之@click点击事件获取元素示例
10-16
今天小编就为大家分享一篇Vue v-for循环之@click点击事件获取元素示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
v-for循环出多个元素，如何单独选中目标元素
hmhmhm0319的博客
06-20 3506
我们经常使用vue中v-for进行元素的循环渲染，渲染之后需要添加单独的功能，这个时候就会遇到一些问题。 上述代码中，我循环渲染了多个div，并添加了鼠标移入和移出事件。但是，在触发事件（鼠标移入）后，会导致所有的div都产生变化（所有div都触发函数并变色），这与意图不符。于是，修改如下： 原理：设置一个动态的类（v-bind），利用三元表达式判断传入的index是否与当前元素的index相等，如果相等，则改变当前...
vue v-for中遍历两个数组（使用类似于python中的zip操作）
只想买把蝴蝶knife
04-03 3241
问题 在做前端的时候遇到一个需求，也就是需要将一长串字符串切分成一个数组，然后显示不同类型的标签，最后变成这样一个效果（我用的是vue+element_ui） 原来标签的字符串如下：WD|西部数据|硬盘 思考 ​ 因为这个时候数据类型都是数组，类型为一个标签，标签文本为一个值，但是v-for中不能进行两个循环，所以核实后需要使用一个循环将两个值都得到,这时候可以在v-for中使用一个js函数，然后在js函数中返回一个数组。 解决方案 <div class="tag-group"> <el
Vue入门 实现简单的轮播图效果
zyynb的博客
06-10 2525
Vue入门 实现简单的轮播图效果 首先创建一个vue实例，准备图片素材数组，通过v-for循环绑定图片，轮播图的切换通过 v-show 判断下标的改变实现显示或隐藏。 代码如下： <style> ul li { list-style: none; } .main { width: 500px; height: 300px; positi
vue 使用el 实现轮播图 active问题
Sucker的小笔记
04-20 553
<div class="carousel-inner" role="listbox"> <div v-for="(banner, index) in bannerList" :key="index" :class="`item ${index === 0 ? 'active' : ''}`"> <img :src=banner....
vue实现active点击切换样式
xx820702的博客
05-24 1030
<div :class="['but',{'active' :currentSort==index}]" v-for="(item,index) in hs" :key="item.id" @click="dj(index)"> data() { return { currentSort:'', }; }, methods: { dj(index){ this.currentSort = index ...
解决Vue v-for动态创建的轮播图不能正常加载问题
qindapeng的博客
09-03 964
解决Vue v-for动态创建的轮播图不能正常加载问题
vue之动态添加class(active)的方法大全
热门推荐
sxjit的博客
03-29 3万+
过来人常说“要想学vue，必先忘记js”，这是因为vue控制dom节点的思维方式和js不大相同。vue项目中如何点击元素动态添加active-class？今天来分享多种解决方式。 一. v-for循环情况下动态添加： 1.v-for循环元素，绑定key 2.在data中创建标识isActive=0，这是为了初始化第一个标题为active 3.监听单击事件触发方法，传入点击元素的index改变标识 ...
vue v-for 同时遍历两个组数
Mr. Ding的小博客
08-21 1万+
需求：v-for 同时遍历两个数组 应用场景： 服务器请求到文章信息，对于最近一个七天发表的文章需要显示new图标 ，服务器请求的信息中有文章发表信息，不过需要自己判断是否为最近七天内发表的文章。 1.判断是否为七天内，结果用数组保存 computed: { newIconIsShow: function() { let _this = this let item = this.itemInfo.articleList let arr = [] for (let i
vue中对v-for循环出的新节点动态添加class
lijincheng77266的博客
10-08 1万+
不废话直接上代码(仅展示一个例子具体使用视情况而定) 上图是页面结构，第四行为三元运算符，将item.id==3作为判断条件，为true则设置class1的样式，否则设置class2的样式。 上图是数据 上图是样式 以下是效果图 ...
使用vue在html中v-for循环
最新发布
03-22
可以使用以下代码实现： ``` <div v-for="item in items"> {{ item }} </div> ``` 其中，`items` 是一个数组，`v-for` 指令会将数组中的每个元素渲染成一个 `<div>` 元素，并将元素的值显示出来。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值