奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > vue面试通 > vue项目作品 >

vue中使用mock模拟商品列表数据案例

时间:2017-10-31 17:39来源:未知 作者:admin
案例示意图 功能知识点: 1、mock生成中文商品名称@cword(6,10) 2、mock生成随机价格 3、mock生成指定尺寸图片@dataImage(200x200) 源码示例: !DOCTYPE html html lang=en head meta charset=UTF-8 titlevue中使用



案例示意图

功能知识点:
1、mock生成中文商品名称@cword(6,10)
2、mock生成随机价格
3、mock生成指定尺寸图片@dataImage('200x200')

源码示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue中使用mock模拟商品列表数据案例 - 奔三路</title>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="mock.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <style type="text/css">li{list-style: none;}.price_info{color: #f58384;font-size: 18px} </style>
</head>
<body>
    <div class="container" style="margin-top: 20px">
        <div class="row" id="mmk">
            <ul>
                <li class="col-md-3" v-for="info in goodsList">
                    <p><img :src="info.thumb" alt=""></p>
                    <p>{{info.id}} {{info.name}}</p>
                    
                    <p class="price_info">¥{{info.price}}</p>
                
                </li>
            </ul>
        </div>
    </div>

    <script type="text/javascript">
        Mock.mock('http://g.cn/ll', {
            'goodsList|8':[{
                "id|+1":1, //id自增长
                "name" : '@cword(6,10)',     //商品名称
                "price|1-100":100,          //商品价格
                "content"  : "@cparagraph()", //简短描述
                "thumb"  : "@dataImage('200x200')" //缩略图
            }]
            
        });
        new Vue({
            el:'#mmk',
            data:{
                goodsList:[]
            },
            created(){
                $.get('http://g.cn/ll', (data)=> {
                     this.goodsList = JSON.parse(data).goodsList
                })
            }
        })
        

            
    </script>
</body>
</html>

(责任编辑:admin)
顶一下
(1)
100%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
史密斯 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2017-11-24 11:11 最后登录:2018-09-02 11:09

关注奔三路