一个数组样式上要分成两个

 如图所示,要有一个区分来显示,如果一开始就是这样还可以有很多种处理方式,但是这个后期一直在调整所以不好重做因为开发已经完成,加上很多地方联动改的地方太多,所以采用了一个比较笨的方法

 <ul class="classification">
          <li v-for="(item, index) in classificaObj.slice(0,5)" :key="index" :class="selectClassifica(item, index)" @click="classificaHandle(item,index)">
            <p :class="'icon ' + item.icon" :id="item.code">{{item.name}} </p>
            <p class="num">{{item.num ? item.num : 0}}</p>
          </li>
        </ul>
        <ul class="classification classificationPurple">
          <li v-for="(item, index) in classificaObj.slice(5)" :key="index" :class="selectClassifica(item, 5 + index)" @click="classificaHandle(item,( 5 + index))">
            <p :class="'icon ' + item.icon" :id="item.code">{{item.name}} </p>
            <p class="num">{{item.num ? item.num : 0}}</p>
          </li>
        </ul>
classificaObj: [
        { icon: "icon-dqs", code: "dqsNum", name: "xxxxx", statu: 3, num: 0 },
        { icon: "icon-kgjg", code: "kgjgNum", name: "yyyy", statu: 4, num: 0 },
        { icon: "icon-jryxj", code: "mzyxjNum", name: "zzzzzz", statu: 2, num: 0 },
        { icon: "icon-jrdxj", code: "mzdxjNum", name: "wwwwwww", statu: 1, num: 0 },
        { icon: "icon-ysjg", code: "ysjqNum", name: "nnnnnnn", statu: 5, num: 0 },
        { icon: "icon-xjyc", code: "xjycNum", name: "ppppppp", statu: 6, num: 0 },
        { icon: "icon-wzsg", code: "wzsgNum", name: "ccccccc", statu: 8, num: 0 },
      ],

 selectClassifica 是样式类型根据需求变换

selectClassifica(item, index) {
      let obj = {}
      // 这里要尽量避免使用index
      if (this.classificaActive == index) {
        obj['active'] = true
      }
     // 类型区分
      if (item.code == 'xjycNum' || item.code == 'wzsgNum') {
        obj['typePurple'] = true
      }
      return obj;
    },
classificaHandle(item, index) {
      console.log('点击各标签.....', item, index)
     
      if (item.code === 'wzsgNum') {
        this.$router.push({
          name: "unlicensedConstru",
         });
      } else {
       // 这里也是尽量不用index, 最后编写数据的时候定义一个唯一的标识来赋值
       // 比如用数据中code 或者 statu 
        this.classificaActive = index;
       
      } 
    },

看代码classificaObj.slice(0,5) 是要区分的前几个,classificaObj.slice(5) 是去除前面的后剩下的几个,这里就写死了,后期如果还有变动就需要再次调整,但是没有办法,还有一个要注意的就是在写选中事件的时候尽量避免使用index来做选中,这样就可以避免后期出现很多问题!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值