第29节: Vue3 列表渲染
在UniApp中使用Vue3框架时，你可以使用列表渲染语法来动态地渲染一个列表。下面是一个示例，演示了如何在UniApp中使用Vue3框架使用列表渲染：
<template> <view> <button @click="addItem">Add Item</button> <ul> <li v-for="(item, index) in items" :key="index">{{ item }}</li> </ul> </view>
</template> <script setup>
import { ref } from 'vue'; const items = ref([]);
const addItem = () => { items.value.push(`Item ${items.value.length + 1}`);
};
</script>
在上面的示例中，我们使用了v-for指令来渲染一个列表。v-for指令接受一个数组或对象作为参数，并使用一个模板来渲染每个元素。在本例中，我们将items数组作为参数传递给v-for指令，并在<li>元素中使用插值语法显示每个元素的值。通过点击按钮调用addItem方法，可以向items数组中添加新的元素，并自动更新列表的渲染结果。通过使用列表渲染，你可以动态地渲染一个可变数量的元素，从而实现更灵活的界面展示。