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

我不是女神ヾ 2022-03-21 08:48 519阅读 0赞

<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>