uni-app 筛选显示选中结果及全部结果

先来看下效果图：

微信截图_20201116162557.png
微信截图_20201116162521.png 微信截图_20201116162537.png

html

<view class="optionlist">

<view class="optiontop">

<text class="left">操作紀錄</text>

<text class="right all font12" @tap="showoption()">{{text}} &nbsp;&nbsp;<text class="fa" :class="[show?'fa-angle-up':'fa-angle-down']"></text></text>

<view class="select" v-show="show">

<view class="option" :class="[text == '全部'?'active':'']" @tap="select" data-text="全部" data-type="0">全部</view>

<view class="option" :class="[text == '買入'?'active':'']" @tap="select" data-text="買入" data-type="1">買入</view>

<view class="option" :class="[text == '賣出'?'active':'']" @tap="select" data-text="賣出" data-type="2">賣出</view>

</view>

</view>

</view>

<view class="clear"></view>

<view class="prodatalists">

<view class="prodatalist" v-for="(item, index) in dataList" :key="index" v-if="type == 0 ? showview : (item.type == type?showview:'') ">

<image src="../../static/pro5.png" mode="widthFix" class="prolistimg left" v-if="item.type==1"></image>

<image src="../../static/pro6.png" mode="widthFix" class="prolistimg left" v-if="item.type==2"></image>

<view class="proliststext left">

<view class="proliststexts">

<text>{{item.value}}</text>

<text class="proliststextsnum">{{item.val}}</text>

</view>

<view class="font12 proliststextstime">{{item.date}}</view>

</view>

<view class="clear"></view>

</view>

</view>

js:

export default {

data() {

return {

text:'全部',

type:0,

show:false,

showview:true,

dataList:[

{

value: '買入',

date: '2020-11-20 14:20',

val: '-100.000',

type: 1

},

{

value: '買入',

date: '2020-11-20 14:20',

val: '-100.000',

type: 1

},

{

value: '賣出',

date: '2020-11-20 14:20',

val: '+100.000',

type: 2

},

{
value: '賣出',

date: '2020-11-20 14:20',

val: '+100.000',

type: 2

},

{

value: '賣出',

date: '2020-11-20 14:20',

val: '+100.000',

type: 2

},

]

}

},

methods: {

showoption(e){

this.show=true;

},

select: function (e) {

this.text=e.currentTarget.dataset.text;

this.type=e.currentTarget.dataset.type;

console.log(this.type)

this.show=false;

},

}

}

主要实现效果的有效句为：v-if="type == 0 ? showview : (item.type == type?showview:'') " 双重判断

然后就完成啦！