假设我在一个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>
2条答案
按热度按时间wkyowqbh1#
你可以创建一个布尔变量,它在点击时改变它的状态。然后你可以创建方法或计算属性,它返回数组(如果你的变量等于真,则返回数组本身,否则返回切片数组)
以下是示例(未选中,但应该可以工作)
vd8tlhqk2#
更简单的方法是显示/隐藏,而不是使用切片/取消切片过程。
只需使用一个条件,通过使用数据属性显示全部或仅显示3个。