vue 实现点击按钮加载更多

<template>
  <div>
    <div>
      <div v-for="(item, key) in list" :key="key" v-show="key < num">
        {{ item }}
      </div>
      <span v-if="constNum < list.length" @click="showMore">{{ txt }}</span>
    </div>
  </div>
</template>
<script src="https://unpkg.com/vue"></script>
<script>
export default {
  props: {},
  data() {
    return {
    	list: ["111", "222", "333", "444", "555", "666"],
      	isShow: true,
      	txt: "显示全部",
      	num: 4,
      	constNum: 4
     }
  },
  methods: {
  	showMore() {
      this.isShow = !this.isShow;

      this.num = this.isShow ? this.constNum : this.list.length;
      this.txt = this.isShow ? "显示全部" : "收起";
    }
  },
  components: {},
  mounted() {}
};
</script>

<style  lang="scss">


* {
  padding: 0;
  margin: 0;
}
</style>