Vue 简单实例 地址选配7 - 确认地址 - 查看更多

1、要求默认只展示3个地址，其他地址点击查看更多展开

通过使用过滤器，并定义变量 limit：3，然后循环渲染 addrFilter 数组

<li class="check" v-for="item in addrFilter" :key="item.addressId">

<script>
export default {
  // 计算属性
  computed: {
    // 过滤器,返回一个数组
    addrFilter() {
      return this.addrList.slice(0, this.limit)
    }
  }
}
</script>

此时默认只展示3个地址：

2、给查看更多添加点击事件：

<a class="addr-more-btn up-down-btn open"
  href="javascript:;" @click="clickMore">
      查看更多
      <i class="i-up-down">
              <i class="i-up-down-l"></i>
              <i class="i-up-down-r"></i>
      </i>
</a>

<script>
export default {
  methods: {
    // 查看更多
    clickMore() {
      if (this.limit == 3) {
        this.limit = this.addrList.length
      } else {
        this.limit = 3
      }
    }
  },
}
</script>

3、查看更多后的图标变化

<a  :class="['addr-more-btn', 'up-down-btn', limit == 3 ? '' : 'open']"  href="javascript:;" @click="clickMore">
        查看更多
        <i class="i-up-down">
                  <i class="i-up-down-l"></i>
                  <i class="i-up-down-r"></i>
        </i>
</a>

效果图：