是否可以将数组作为模型传递给VueJs 3中的组件

Question

我是VueJs 3的新手，我正在尝试创建一个用户列表组件。我想把一组用户传递给这个组件，并在屏幕上看到一个列表。之后，我想按下组件内部的一个按钮，看着它从屏幕上滑出来。

我不知道这是难得离谱还是容易得离谱。。。有人能画个草图吗？

Answer 1

应该能够使用transition-group，它是相当直接的

演示：(根据文档修改(

const Demo = {
data() {
return {
items: ["John", "Judy"],
}
},
methods: {
add() {
this.items.unshift(["Albert", "Betty", "Hugo"][Math.floor(Math.random()*3)])
},
addEnd() {
this.items.push(["Andrew", "Guadeloupe", "Pepijn"][Math.floor(Math.random()*3)])
},
remove() {
this.items.pop()
}
}
}
Vue.createApp(Demo).mount('#list-demo')

body {
margin: 30px;
}
button {
margin-right: 10px;
}
.list-item {
display: inline-block;
margin-right: 10px;
}
.list-enter-active,
.list-leave-active {
transition: all 1s ease;
}
.list-enter-from,
.list-leave-to {
opacity: 0;
transform: translateY(30px);
}

<script src="https://unpkg.com/vue@3.0.3/dist/vue.global.prod.js"></script>
<div id="list-demo">
<button @click="add">Add</button>
<button @click="remove">Remove</button>
<button @click="addEnd">Add</button>
<transition-group name="list" tag="p">
<span v-for="item in items" :key="item" class="list-item">{{ item }}</span>
</transition-group>
</div>