先来看下效果图：
微信截图_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}} <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:'') " 双重判断
然后就完成啦！
网友评论