zoukankan      html  css  js  c++  java
  • 往element 模块里面渲染数据

    <template>
      <div class="hello">
        <section class="el-container">
          <aside class="el-aside" style=" 200px;">
            <el-card class="box-card">
              <div slot="header" class="clearfix tit">
                <span class="">卡片名称</span>
              </div>
              <div v-for="value in arr1" :key="value" class="text item cardtxt">
                {{value}}
              </div>
            </el-card>
    
            <el-card class="box-card">
              <div slot="header" class="clearfix tit">
                <span class="">卡片名称</span>
              </div>
              <div v-for="value in arr2" :key="value" class="text item">
                {{value}}
              </div>
            </el-card>
          </aside>
        </section>
      </div>
    </template>

    <script> export default { data() { return { arr1:['cool','beautiful','cute'], arr2:['funny','interesting','sad'] } }, name: 'HelloWorld', props: { msg: String } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped lang="stylus"> .hello{ width 100% } .imgs{ height 250px margin-top 25px } .el-carousel__item h3 { color: #475669; font-size: 18px; opacity: 0.75; line-height: 300px; margin: 0; height 300px } .el-card__body{ padding 0 } .cardtxt{ padding 0 } .el-carousel__item:nth-child(2n) { background-color: #99a9bf; } .el-carousel__item:nth-child(2n+1) { background-color: #d3dce6; } .el-container { display: flex; flex-direction: row; flex: 1; flex-basis: auto; box-sizing: border-box; min- 0; background: rgb(189,195,199) height 700px } .box-card{ width 80% margin auto margin-top 20px } .tit{ padding 0 background rgb(46,204,113) } .text{ height 30px } .box-card{ height 300px } .el-main{ width 80% margin 0 auto height 400px overflow hidden } el-aside{ height:600px margin-top 50px } </style>
  • 相关阅读:
    排序三 直接插入排序
    编写你的第一个django应用程序2
    编写你的第一个web应用程序1
    你被体制化了吗
    服务器安装tensorflow导入模块报错Illegal instruction (core dumped)
    查看数据库里有没有数据
    python实现贪吃蛇
    在pycharm中执行脚本没有报错但输出显示Redirection is not supported.
    linux安装redis
    pycharm快捷键
  • 原文地址:https://www.cnblogs.com/white55k/p/11851934.html
Copyright © 2011-2022 走看看