1.介绍

要求：掌握indexOf()用法；动态绑定类名的对象写法；iconfont使用；split()用法；三元运算符用法；es6模板字符串；

说明：首先综合元素默认有元素并且是降序。服务器传来的数据格式：1: 综合,2: 价格 asc: 升序,desc: 降序。下面意思是综合，降序。它放在data中searchParams.order里面做响应式数据。

2.vue

说明：采用但是iconfont图标。类名，如果从data里面存入的数据查出1(!=-1),说明就是综合；为li绑定了点击事件，传入了1代表是点击的是综合元素；span标签是为了点击后，有一个升序或者降序的一个图标。如果isAsc为true，那么展示的就是升序图标，那么如果是isDesc为true，那么展示的就是降序。

html 复制代码

<li
  :class="{ active: searchParams.order.indexOf('1') != -1 }"
     @click="changeOrder(1)"
                >
     <a>综合<span
         class="iconfont"
          :class="{ 'icon-up-arrow': isAsc, 'icon-down': isDesc }"
          v-show="searchParams.order.indexOf('1') != -1"
           ></span></a>
  </li>
 <li
      :class="{ active: searchParams.order.indexOf('2') != -1 }"
      @click="changeOrder(2)"
                >
       <a>价格<span
           class="iconfont icon-down"
              :class="{ 'icon-up-arrow': isAsc, 'icon-down': isDesc }"
               v-show="searchParams.order.indexOf('2') != -1"
                ></span></a>
</li>

3.js

说明：书写必要的计算属性。如果从order.indexOf("asc")!=-1，代表着是升序。

javascript 复制代码

      isAsc() {
        return this.searchParams.order.indexOf("asc") !== -1;
      },
      isDesc() {
        return this.searchParams.order.indexOf("desc") !== -1;
      },

4.js

说明：methods里面，点击事件触发，首先我们存储在order数据(vuex三连环获取)进行拆分，数据的格式是[1:desc]。首先我们将综合和排序进行拆分。声明一个新的order属性，判断用户当前点击的是综合还是价格，首先默认就是综合，并且是降序。因此如果相等，那么就成了asc。如果不相等那么desc。否则，用户点击的就是价格了，点击后让他默认降序，然后将newOrder替换order。发送网络请求。

javascript 复制代码

    changeOrder(flag) {
      // 获取的是当前状态,当你改变以后，就成了2:desc
      let originOrder = this.searchParams.order;
      // console.log(originOrder);
      // 综合还是价格
      let originFlag = originOrder.split(":")[0];
      // 升序还是降序
      let originSort = originOrder.split(":")[1];
      //  准备一个新的order属性
      let newOrder = "";
      // 一定是综合(默认)并且默认也是降序
      if (flag == originFlag) {
        // 格式是浏览器规定的
        newOrder = `${originFlag}:${originSort == "desc" ? "asc" : "desc"}`;
      } else {
        // 点击的价格
        newOrder = `${flag}:${"desc"}`;
        // console.log(newOrder);
      }
      this.searchParams.order = newOrder;
      this.getData();
    },

5.请求函数

说明：请求封装成函数，直接调用。

javascript 复制代码

    getData() {
      this.$store.dispatch("getSearchList", this.searchParams);
      //  alert("执行了啊")
    },

vue中点击添加类名，并且实现升降序

1.介绍

2.vue

3.js

4.js

5.请求函数