vue 点击展开显示更多 点击收起部分隐藏
vue 点击展开显示更多 点击收起部分隐藏要求:只展示几条数据,其余的收起。点击显示更多时候,查看全部如下:以百度云的页面为例直接上代码:1.html部分:<div><div style="background-color:#eef1f6; "><div><p v-for="(item, index) in showdetailList"><s
·
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
更多推荐
已为社区贡献14条内容
所有评论(0)