vue.js 是否有一种方法可以在单击时“取消切片”阵列?

xv8emn3q  于 2023-01-21  发布在  Vue.js
关注(0)|答案(2)|浏览(145)

假设我在一个div中有一个包含10个项目的列表,当页面加载时,我只希望前3个项目显示在div中,但当单击它时,我希望所有10个项目都显示出来,如果我再次单击,它们将返回到只显示3个项目。
我知道我可以使用slice来移除这些项,但是如何在切片后将这些项取回呢?

<template>
 <div>
   <div v-for="item in items">
      {{ item }}
   </div>
  <button @click="showItems">Hide/Show list</button>
  </div>
</template>
<script>
   data(){
      return {
         items: [ ...some list]
    }
   },
  methods: {
     showItems() {
        this.items.slice(0,2) /* I want this to either slice or show all on slick */
    }
  }
</script>
wkyowqbh

wkyowqbh1#

你可以创建一个布尔变量,它在点击时改变它的状态。然后你可以创建方法或计算属性,它返回数组(如果你的变量等于真,则返回数组本身,否则返回切片数组)
以下是示例(未选中,但应该可以工作)

<template>
 <div>
   <div v-for="item in getItemsList()">
      {{ item }}
   </div>
  <button @click="showItems">Hide/Show list</button>
  </div>
</template>
<script>
   data(){
      return {
         items: [ ...some list],
         showAll: true,
    }
   },
  methods: {
      showItems() {
        this.showAll = !this.showAll;
      },
      getItemsList() {
        if (!this.showAll) {
          return this.items.slice(0, 2);
        }
        return this.items;
      }
  }
</script>
vd8tlhqk

vd8tlhqk2#

更简单的方法是显示/隐藏,而不是使用切片/取消切片过程。
只需使用一个条件,通过使用数据属性显示全部或仅显示3个。

Vue.config.productionTip = false;

var app = new Vue({
  el: '#app',
  data() {
    return {
      showAll: false,
      items: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    }
  },
  methods: {
    showItems() {
      this.showAll = !this.showAll;
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
    <template v-for="(item, index) in items">
      <div v-if="!showAll && index < 3 || showAll">
        {{ item }}
      </div>
    </template>
    <button @click="showItems">Hide/Show list</button>
  </div>
</div>

相关问题