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>KTVspan>
      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.5kmdiv>
                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.5kmdiv>
                div>
              div>
            div>
            <div class="sale">
              <div class="left">
                <div>￥19div>
                <div>门市价:￥39div>
              div>
              <div class="right">
                <div class="top">
                  <div class="chou">筹div>
                  <span>仅售19元，价值39元周一至周五11:00 - 16:00使用span>
                div>
                <span>90天消费425span>
              div>
            div>
            <div class="sale">
              <div class="left">
                <div>￥39div>
                <div>门市价:￥59div>
              div>
              <div class="right">
                <div class="top">
                  <div class="chou">筹div>
                  <span>仅售39元，价值59元周一至周五11:00 - 16:00使用span>
                div>
                <span>90天消费525span>
              div>
            div>
          div>
        div>
      van-tab>
      <van-tab title="休闲">内容 2van-tab>
      <van-tab title="聚会">内容 3van-tab>
      <van-tab title="运动">内容 4van-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>