vue点击展开更多，点击收起

<!-- 休闲娱乐界面 -->
<template>
<div>
<div class="menus">
<div class="menus_item">
<div class="icon_box">
<span class="iconfont icon-anmo"></span>
</div>
<span>按摩/足疗</span>
</div>
<div class="menus_item">
<div class="icon_box box2">
<span class="iconfont icon-xiyu"></span>
</div>
<span>洗浴/汗蒸</span>
</div>
<div class="menus_item">
<div class="icon_box box3">
<span class="iconfont icon-KTV"></span>
</div>
<span>KTV</span>
</div>
<div class="menus_item">
<div class="icon_box box4">
<span class="iconfont icon-jiuba"></span>
</div>
<span>酒吧</span>
</div>
<div class="menus_item">
<div class="icon_box box5">
<span class="iconfont icon-hongpa"></span>
</div>
<span>轰趴</span>
</div>
</div>

<!-- 列表 -->
<van-tabs
color="#0de6ea"
:active="active"
v-bind:change="onChange"
>
<van-tab title="精选">
<div class="choicenesslist">
<div class="choiceness_item">
<div class="main">
<div class="left">
<img
src="https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=4098725977,2954176041&fm=85&s=BE121DCF4F7235866C1D591A03005012"
mode="aspectFill"
>
</div>
<div class="right">
<div class="title"> 新肩堂肩颈按摩理疗(江南丽日店)</div>

<van-rate
readonly
size="12"
:value="value"
/>

<div class="bottom">
<div class="type">按摩/足疗</div>
<div class="location">江南大道沿线  6.5km</div>
</div>
</div>
</div>
<div class="sale" v-for="(item,index) in showList" :key="index">
<div class="left">
<div>{{item.real_price}}</div>
<div>门市价:{{item.market_price}}</div>
</div>
<div class="right">
<div class="top">
<div class="chou">筹</div>
<span>{{item.msg}}</span>
</div>
<span>{{item.buy_num}}</span>
</div>
</div>
<div class="more" @click="show=!show">{{show?'收起':'查看更多优惠'}}<span class="iconfont {'show'?icon-xiajiantou:icon-up}"></span></div>
</div>
<div class="choiceness_item">
<div class="main">
<div class="left">
<img
src="https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=4098725977,2954176041&fm=85&s=BE121DCF4F7235866C1D591A03005012"
mode="aspectFill"
>
</div>
<div class="right">
<div class="title"> 新肩堂肩颈按摩理疗(江南丽日店)</div>

<van-rate
readonly
size="12"
:value="value"
/>

<div class="bottom">
<div class="type">按摩/足疗</div>
<div class="location">江南大道沿线  6.5km</div>
</div>
</div>
</div>
<div class="sale">
<div class="left">
<div>￥19</div>
<div>门市价:￥39</div>
</div>
<div class="right">
<div class="top">
<div class="chou">筹</div>
<span>仅售19元，价值39元周一至周五11:00 - 16:00使用</span>
</div>
<span>90天消费425</span>
</div>
</div>
<div class="sale">
<div class="left">
<div>￥39</div>
<div>门市价:￥59</div>
</div>
<div class="right">
<div class="top">
<div class="chou">筹</div>
<span>仅售39元，价值59元周一至周五11:00 - 16:00使用</span>
</div>
<span>90天消费525</span>
</div>
</div>
</div>
</div>
</van-tab>
<van-tab title="休闲">内容 2</van-tab>
<van-tab title="聚会">内容 3</van-tab>
<van-tab title="运动">内容 4</van-tab>
</van-tabs>
</div>
</template>

<script>
export default {
data () {
return {
saledataList: [
{
'real_price': 19,
'market_price': 39,
'msg': '仅售19元，价值39元周一至周五11:00 - 16:00使用',
'buy_num': '90消费425'
},
{
'real_price': 39,
'market_price': 59,
'msg': '仅售39元，价值59元周一至周五11:00 - 16:00使用',
'buy_num': '90消费425'
},
{
'real_price': 29,
'market_price': 229,
'msg': '仅售29元，价值229元周一至周五11:00 - 16:00使用',
'buy_num': '90消费425'
}
],
active: 0,
value: 5,
show: false
}
},
computed: {
showList: function () {
if (this.show === false) {
var showList = []
if (this.saledataList.length > 2) {
for (var i = 0; i < 2; i++) {
showList.push(this.saledataList[i])
}
} else {
showList = this.saledataList
}
return showList
} else {
return this.saledataList
}
}
},
methods: {
onChange (event) {
wx.showToast({
title: `切换到标签 ${event.detail.index}`,
icon: 'none'
})
},
toggle () {
this.show = !this.show
}
}
}
</script>
<style lang='scss' scoped>
@import "style.scss";
</style>