VUE组件开发ColumnList
发布时间
阅读量：
阅读量
让我们共同设计并实现一个专属的组件吧！
这是一款用于展示小型卡片列表的组件
1 环境
所采用的核心开发环境由VScode、TS、VUE3以及Bootstrap共同构成。
2 代码
2.1 组件部分：
columnlist.vue
<template>
<div class="row">
<div v-for="column in list" :key="column.id" class="col-xs-4 mb-4">
<div class="card h-100 shadow-sm">
<div class="card-body text-center">
<img :src="column.avatar" :alt="column.title" class="rounded-circle border border-light w-25 my-3" />
<h5 class="card-title">{{column.title}}</h5>
<p class="card-text">{{column.description}}</p>
<a href="#" class="btn btn-outline-primar全部评论 (0)
还没有任何评论哟~