VUE组件开发——ColumnList

一起来开发属于自己的组件吧！

这个是一个关于显示一个小的卡片的list的组件

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-primary">进入专栏</a>