vue 点击展开显示更多 点击收起部分隐藏

vue 点击展开显示更多 点击收起部分隐藏

要求：
只展示几条数据，其余的收起。点击显示更多时候，查看全部
如下：以百度云的页面为例


直接上代码：
1.html部分：

<div>
    <div style="background-color:#eef1f6; ">
      <div>
        <p v-for="(item, index) in showdetailList">

        <span  v-html="item.value"></span>
        </p>
      </div>
      <div v-if="detailList.length > 6" v-on:click="changeFoldState">
        <span style="color: deepskyblue;margin-left: 1000px;" >{{brandFold?'查看更多':'收起'}}</span>
      </div>
    </div>
  </div>

2.data数据

 data() {
    return {
      brandFold: false,
      detailList:[
        {value:'<h5>1、创建环境变量</h5>'},
        {value:'<div>您可以给指定环境创建变量值，如变量 Name 为 Path， 变量 Value 为 /stage/test。  </div>'},
        {value:'<h6> 2、在API定义里设置变量</h6>'},
        {value:'<div>您可以在API定义时，后端Path、后端服务地址部分加入变量，以#变量名#表示，如在API定义中，Path写为“#Path#”。</div>'},
        {value:'<h6> 3、发布时变量值会替换变量标识，补充完API定义</h6>'},
        {value:'<div> 当该API定义发布到该环境时，API定义中的变量就会取值对应的变量值，即发布过程中变量标识会被相应环境的变量值替换。</div>'},
        {value:'<h6>注意事项:</h6>'},
        {value:'<div>1、在API定义中配置了变量标识后，在API列表——管理——调试页面将无法调试。</div>'},
        {value:'<div>2、变量名严格区分大小写。</div>'},
        {value:'<div>3、如果在API定义中设置了变量，那么一定要在要发布的环境上配置变量名&变量值，否则变量无赋值，API将无法正常发布。</div>'}
      ],
    };
  },

3.使用computed属性：
set方法里的val值就是get方法返回的值

 computed: {
    showdetailList: {
      get: function () {
        if (this.brandFold) {
          if (this.detailList.length < 7) {
            return this.detailList
          }
          let newArr = []
          for (var i = 0; i < 6; i++) {
            let item = this.detailList[i]
            newArr.push(item)
          }
          return newArr
        }
        return this.detailList
      },
      set: function (val) {
        this.showdetailList = val
      }
    }
  },

changeFoldState方法：
changeFoldState() {
this.brandFold = !this.brandFold
}

参考文档：https://blog.csdn.net/weixin_41941325/article/details/80936603