qq_33709408
2018-01-30 04:15
采纳率: 0%
浏览 2.9k

vue v-for循环与class计算类名

 <li :class="0|title_li_class" @click="titleli_click($event,0)">全部</li>
<li v-for="(item, index) in titleli_list" @click="titleli_click($event,item[0])" :class="item[0]|title_li_class">{{item[1]}}</li>

//filters(vue 里过滤器);
filters: {
        title_li_class: function (value) {
                if (value == this.Classify) {
                        return 'cur';
                }
                else {
                        return '';
                }
        }
},


//fn_url(vue methods里的方法,加载页面时执行);
fn_url: function () {
    if (location.href.indexOf("?") != -1) {
            if (location.href.split('?')[1].split('=')[0] == 'Classify') {
                    this.Classify = location.href.split('?')[1].split('=')[1];
            }
            else {
                    this.Classify = 0;
            }
    }
    else {
            this.Classify = 0;
    }
},

要求:从地址栏获取Classify的值,对应ajax请求到的titleli_list循环产生的item[0],当item[0]等于Classify的时候class类名li就为cur,不等于的时候就没有类名,当地址栏没有Classify的时候也就是Classify等于0,第一个li也就是文字全部的li标签有类名cur,否则没有类名,要怎么写?我这样用过滤器写的方法不对

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • fn_url从哪里执行,不行Classify 作为全局变量,不要加this,你的this指向应该有问题,filter中this是window对象,要注意this的指向

    打赏 评论
  • white_g 2018-01-30 07:59

    filters里面的this不是指向vue实例哦
    所以你可能需要写过滤器的时候把Classify也传入到filters里面**item[0]|title_li_class(Classify)** 同样,你的filter里面的接受参数要改为两个

    另外一个小提示 vue文档也有说过,很多时候我们都可以用computed来解决需要用到filter的事情

    打赏 评论