zoukankan      html  css  js  c++  java
  • Vue用v-for实现结构、数据、样式分离(示例2)

    目标效果图:

    image

    也许你会说,多简单,ul的li,写一个,然后复制很多个,改改不就行了吗!
    然后你就会看到li下面满篇的标签加零零散散的数据散落你的html里。
    由于每个图片描述信息不同,在散乱的标签你还要找到修改的地方。
    下面通过Vue来让html结构和数据分离,从而达到易于阅读,容易维护的效果

    html结构:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <link rel="stylesheet" type="text/css" href="css/scss/stylesheets/screen.css">
    <script src="js/vue2.5.16.min.js"></script>
    <body>
    <div id="box">
        <ul>
            <li v-for="(val, key, index) in imgData" :key="index">
                <a href="" ><img :src="val.src"></a>
                <p><a href="">{{val.name}}</a>
                    <span>{{val.nation}}</span>
                    <span class="star">{{val.star}}</span></p>
                <div class="bottom">{{val.has}}</div>
            </li>
        </ul>
    </div>
    <script src="js/data.js"></script>
    </body>
    </html>

    数据:js/data.js

    1.将数据抽取出来,可交由别人来编写、维护。
    2.由于只是对字符数据的简单处理,所以并不需要很高的技术,普通人皆可以胜任。
    3.可为前端人员省去不必要的麻烦,从而让其只专注于前端技术开发。
    new Vue({
        el: "#box",//与id是box的元素绑定
        data: {//数据
            imgData: [{
                "name": "奥西里斯的天空龙",
                "nation": "神族",
                "src":"css/scss/images/tkl.jpg",
                "star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
                "has": "未获取"
            },{
                "name": "青眼白龙",
                "nation": "龙族",
                "src":"css/scss/images/1318428790913859267.jpg",
                "star": "☆☆☆☆☆☆☆☆☆",
                "has": "未获取"
            },{
                "name": "八岐大蛇",
                "nation": "龙族",
                "src":"css/scss/images/1479995427544648690.jpg",
                "star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
                "has": "未获取"
            },{
                "name": "破坏龙",
                "nation": "龙族",
                "src":"css/scss/images/1777233002951111028.jpg",
                "star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
                "has": "未获取"
            },{
                "name": "邪恶骑士龙",
                "nation": "龙族",
                "src":"css/scss/images/Serpent Night Dragon 邪恶骑士龙[编辑].jpg",
                "star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
                "has": "未获取"
            },{
                "name": "流天类星龙",
                "nation": "龙族",
                "src":"css/scss/images/Shooting Quasar Dragon 流天类星龙[编辑].png",
                "star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
                "has": "未获取"
            },{
                "name": "流星龙",
                "nation": "龙族",
                "src":"css/scss/images/Shooting Star Dragon 流星龙[编辑].jpg",
                "star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
                "has": "未获取"
            },{
                "name": "天空龙",
                "nation": "龙族",
                "src":"css/scss/images/Sky Dragon 天空龙[编辑].jpg",
                "star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
                "has": "未获取"
            },{
                "name": "千年龙",
                "nation": "龙族",
                "src":"css/scss/images/Thousand Dragon 千年龙[编辑].jpg",
                "star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
                "has": "未获取"
            },{
                "name": "虎龙",
                "nation": "龙族",
                "src":"css/scss/images/Tiger Dragon 虎龙[编辑].jpg",
                "star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
                "has": "未获取"
            },{
                "name": "民艺龙",
                "nation": "神族",
                "src":"css/scss/images/Totem Dragon 民艺龙.jpg",
                "star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
                "has": "未获取"
            },{
                "name": "暴君龙",
                "nation": "龙族",
                "src":"css/scss/images/Tyrant Dragon 暴君龙[编辑].jpg",
                "star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
                "has": "未获取"
            },{
                "name": "灵魂龙",
                "nation": "龙族",
                "src":"css/scss/images/Spirit Ryu 灵魂龙[编辑].jpg",
                "star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
                "has": "未获取"
            },{
                "name": "三角魔龙",
                "nation": "龙族",
                "src":"css/scss/images/Tri-Horned Dragon 三角魔龙[编辑].jpg",
                "star": "☆☆☆☆☆☆☆☆☆",
                "has": "未获取"
            },{
                "name": "三头龙王",
                "nation": "龙族",
                "src":"css/scss/images/Trident Dragion 三头龙王[编辑].jpg",
                "star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
                "has": "未获取"
            },{
                "name": "多尔·多拉",
                "nation": "龙族",
                "src":"css/scss/images/Twin-Headed Behemoth 多尔·多拉[编辑].jpg",
                "star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
                "has": "未获取"
            },{
                "name": "邪恶骑士龙",
                "nation": "龙族",
                "src":"css/scss/images/Serpent Night Dragon 邪恶骑士龙[编辑].jpg",
                "star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
                "has": "未获取"
            },{
                "name": "流天类星龙",
                "nation": "龙族",
                "src":"css/scss/images/Shooting Quasar Dragon 流天类星龙[编辑].png",
                "star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
                "has": "未获取"
            },{
                "name": "流星龙",
                "nation": "龙族",
                "src":"css/scss/images/Shooting Star Dragon 流星龙[编辑].jpg",
                "star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
                "has": "未获取"
            },{
                "name": "天空龙",
                "nation": "龙族",
                "src":"css/scss/images/Sky Dragon 天空龙[编辑].jpg",
                "star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
                "has": "未获取"
            },{
                "name": "千年龙",
                "nation": "龙族",
                "src":"css/scss/images/Thousand Dragon 千年龙[编辑].jpg",
                "star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
                "has": "未获取"
            },{
                "name": "虎龙",
                "nation": "龙族",
                "src":"css/scss/images/Tiger Dragon 虎龙[编辑].jpg",
                "star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
                "has": "未获取"
            },{
                "name": "民艺龙",
                "nation": "神族",
                "src":"css/scss/images/Totem Dragon 民艺龙.jpg",
                "star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
                "has": "未获取"
            },{
                "name": "红龙",
                "nation": "神族",
                "src":"css/scss/images/Tyhone #.2 红龙.jpg",
                "star": "☆☆☆☆☆☆☆☆☆☆☆☆☆",
                "has": "未获取"
            }]
        }
    })

    样式:

    
    
    ol, ul {
        list-style: none;
    }
    
    @font-face {
        font-family: myfont;
        src: url('../fonts/ygyxsziti2.0.ttf');
    }
    body {
        background: ghostwhite;
        font-family: myfont;
    }
    
    #box {
        width: 900px;
        margin: 0 auto;
    }
    #box ul li {
        background-color: #D6EAFD;
        height: auto;
        width: 164px;
        border: 1px solid #aaa;
        float: left;
        margin: 5px;
    }
    #box ul li img {
        width: 100%;
        height: 160px;
        align-content: center;
    }
    
    .bottom {
        height: 40px;
        line-height: 40px;
        text-align: center;
        background: #eee;
    }
    
    .star {
        font-size: 14px;
        letter-spacing: -3px;
    }
    
    p a {
        display: block;
        line-height: 23px;
        padding-left: 10px;
    }
    p span {
        display: block;
        line-height: 23px;
        padding-left: 10px;
    }
    
    .top {
        height: 40px;
    }
    .top a {
        height: 20px;
        width: 20px;
        display: block;
        float: right;
        margin: 5px;
    }
  • 相关阅读:
    格式化数字,将字符串格式的数字,如:1000000 改为 1 000 000 这种展示方式
    jquery图片裁剪插件
    前端开发采坑之安卓和ios的兼容问题
    页面消息提示,上下滚动
    可以使用css的方式让input不能输入文字吗?
    智慧农村“三网合一”云平台测绘 大数据 农业 信息平台 应急
    三维虚拟城市平台测绘 大数据 规划 三维 信息平台 智慧城市
    农业大数据“一张图”平台测绘 大数据 房产 国土 农业 信息平台
    应急管理管理局安全生产预警平台应急管理系统不动产登记 测绘 大数据 规划 科教 三维 信息平台
    地下综合管廊管理平台测绘 大数据 地下管线 三维 信息平台
  • 原文地址:https://www.cnblogs.com/toly-top/p/9782018.html
Copyright © 2011-2022 走看看