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

短命女 2021-09-13 17:24 818阅读 0赞

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

要求：  
只展示几条数据，其余的收起。点击显示更多时候，查看全部  
如下：以百度云的页面为例  
![在这里插入图片描述][20201105100415679.png_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnJqX25pdQ_size_16_color_FFFFFF_t_70_pic_center]  
直接上代码：  
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

[20201105100415679.png_pic_center]: /images/20210913/7d6c7098fd4c4d29b2ea6fd4004a34cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnJqX25pdQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20210913/b915f1bf918d43f1b94984aa82c57123.png