<template>
<div>
<div v-for="(item, index) in list" :key="index" v-show="index<num">{{item}}</div>
<span @click="showMore">{{txt}}</span>
</div>
</template>
<script>
export default {
props: {},
data() {
return {
list: ["111", "222", "333", "444", "555", "666"],
isShow: true,
txt: "显示全部",
num: 2
};
},
methods: {
showMore() {
this.isShow = !this.isShow;
this.num = this.isShow ? 2 : this.list.length;
this.txt = this.isShow ? "显示全部" : "收起";
}
}
};
</script>
<style >
* {
padding: 0;
margin: 0;
}
</style>
点击按钮显示隐藏数据
最新推荐文章于 2021-06-28 00:05:10 发布