在Vue.js中编写无序列表可以使用v-for
指令结合<ul>
和<li>
标签来实现。下面是一个示例代码:
<template>
<div>
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
]
};
}
};
</script>
在上面的代码中,我们使用了v-for
指令来遍历items
数组,并将每个数组元素渲染为一个<li>
标签。:key
属性用于给每个列表项指定一个唯一的标识符,以提高渲染性能。
这样,当items
数组中的数据发生变化时,无序列表会自动更新以反映最新的数据。你可以根据实际需求修改items
数组的内容和结构。
推荐的腾讯云相关产品:腾讯云云服务器(CVM),产品介绍链接地址:https://cloud.tencent.com/product/cvm
领取专属 10元无门槛券
手把手带您无忧上云