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，那么展示的就是降序。
<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，代表着是升序。
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。发送网络请求。
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.请求函数
说明：请求封装成函数，直接调用。文章来源：https://www.toymoban.com/news/detail-632371.html
getData() {
this.$store.dispatch("getSearchList", this.searchParams);
// alert("执行了啊")
},文章来源地址https://www.toymoban.com/news/detail-632371.html
到了这里，关于vue中点击添加类名，并且实现升降序的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
