vue项目的card的组件

<div class="main-body-text-card"><el-card class="box-card"><div slot="header" class="clearfix"><span>{{card_header}}</span><el-bu...

墨聞

6563人浏览 · 2020-09-25 17:33:31

墨聞 · 2020-09-25 17:33:31 发布

<div class="main-body-text-card">
                   <el-card class="box-card">
                   <div slot="header" class="clearfix">
                   <span>{{card_header}}</span>
                   <el-button style="float: right; padding: 3px 0" type="text" class="card_btn">{{card_btn}}</el-button>
                   </div>
                   <div v-for="card in cardbox" :key="card.id" class="text item">
                       <div class="card_text">•&emsp;{{card.idView }}</div>
                           <div class="card_div"></div>
                   </div>
                   </el-card>
               </div>

通过数组来添加数据

cardbox:[ {id:0,idView: '网站更新(2020年8月25日)'},
               {id:0,idView: '网站更新(2020年8月22日)'},
               {id:0,idView: '网站更新(2020年8月18日)'},
               {id:0,idView: '网站更新(2020年8月12日)'},
               {id:0,idView: '网站更新(2020年8月02日)'},]

card的第一行可以通过el-card__header来设计样式

.el-card{ height: 340px;}
.el-card__header{ background-color: lightgray; color: #444478;}
.card_btn{ color: #444478;}
.card_text{ margin: 13px 10px; color: #444478; }
.card_text:hover{ color: #d8d7ff;}
.card_div{ height: 1px; border-bottom: 1px lightgray solid

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^