标签：实战 searchParams return indexOf ...... Vue2 电商 order desc
排序的操作
- 数据格式说明
- '1'表示'综合排序'
- '2'表示'价格排序'
- 'asc'表示'升序'
- 'desc'表示降序
- 项目的数据格式的样子
- 1:asc
- 1:desc
- 2:asc
- 2:desc
### Search.index.vue
......
"order": "1:desc", // 项目的默认排序(综合降序排列)
class=active样式的显示: 由order参数值来决定
### Search.index.vue
......
<ul class="sui-nav">
<!--找到'1'就展示class样式-->
<li :class="{active:searchParams.order.indexOf('1') != -1}">
<a href="#">综合</a>
</li>
<!--找到'2'就展示class样式-->
<!--'1'和'2'不可能同时存在-->
<li :class="{active:searchParams.order.indexOf('2') != -1}">
<a href="#">价格⬆</a>
</li>
</ul>
computed:{
......
isOne(){
return this.searchParams.order.indexOf('1') != -1
},
isTwo(){
return this.searchParams.order.indexOf('2') != -1
}
},
......
<ul class="sui-nav">
<li :class="{active:isOne}"> <!--应用-->
<a href="#">综合</a>
</li>
<li :class="{active:isTwo}">
<a href="#">价格</a>
</li>
</ul>
### public.index.html
<head>
......
<!--先引入全局css样式(阿里后台有提供代码)-->
<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4064138_5e7pv6qsh5g.css">
</head>
### 举例使用
......
<span class="iconfont icon-down"></span>
- 本项目中,我们引入两个箭头(向上升 && 向下降)
- 设计思路:
- 当 order值包含'asc'时,就展示'上升箭头'
- 当 order值包含'desc'时,就展示'下降箭头'
<ul class="sui-nav">
<li :class="{active:isOne}">
<!--展示的时候,添加两个class样式: iconfont && icon-xxx -->
<!--语法注意事项: 如果不加引号,icon-down写法会报'-'错误-->
<a href="#">综合<span v-show="isOne" class="iconfont" :class="{'icon-down':isDesc,'icon-ttd-copy':isAsc}"></span></a>
</li>
<li :class="{active:isTwo}">
<a href="#">价格<span v-show="isTwo" class="iconfont" :class="{'icon-down':isDesc,'icon-ttd-copy':isAsc}"></span></a>
</li>
</ul>
......
computed:{
isOne(){
return this.searchParams.order.indexOf('1') != -1
},
isTwo(){
return this.searchParams.order.indexOf('2') != -1
},
isAsc(){
// 若找到asc
return this.searchParams.order.indexOf('asc') != -1
},
// 若找到desc
isDesc(){
return this.searchParams.order.indexOf('desc') != -1
}
},
标签：实战,
searchParams,
return,
indexOf,
......,
Vue2,
电商,
order,
desc
From： https://www.cnblogs.com/qinganning/p/17393938.html