Vue3组件开发——列表展开项(DropDownitem)

本文已参与「新人创作礼」活动，一起开启掘金创作之路

title: 'test2的专栏', description: '知乎专栏的描述', avatar: 'vue-maker.oss-cn-hangzhou.aliyuncs.com/vue-marker/…'

}, { id: 3, title: 'test3的专栏', description: '知乎专栏的描述'

}, { id: 4, title: 'test4的专栏', description: '知乎专栏的描述', avatar: ''

}] export default defineComponent({ name: 'App', components: { ColumnList, GlobalHaeder }, setup () { return { list: testData, currentUser } } })

# 3 运行

终端输入命令：

npm run serve

运行效果

1. 登录

   ![image-20220113004333975](https://img-blog.csdnimg.cn/img_convert/93333d84d324d6f2ca5f246e06f91495.png)

2. 未登录

   ![image-20220113004426331](https://img-blog.csdnimg.cn/img_convert/7e1b8d08c611147a244921d1cc719058.png)