mockjs+vue页面直接展示数据的方法


Posted in Javascript onDecember 19, 2018

最近想往数据库里导一些数据,同事推荐了mock,了解一下觉得不错,现将在vue用的mock贴上来

写在前默认看此文的盆友都是有vue基础的哟~~

一、导读

将 mockjs 的数据直接展示在 vue 页面上

mockjs官网链接

关于mockjs,官网描述的是

1.前后端分离

2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。

3.数据类型丰富

4.通过随机数据,模拟各种场景。

等等优点。

二、安装mockJS

//安装mockJS
npm install mockjs

不说废话,贴代码。

三、将 mockjs 的数据直接展示在 vue 页面上

引用

import Mock from 'mockjs';

注意

  • 使用 <pre> 标签能格式化输出 json 代码
  • 使用 mockjs 的随机函数 Random 要先定义常量
  • 自定义随机函数用 extend

代码

<template>
 <div>
  <pre>{{text }}</pre>
 </div>
</template>
<script>
 import Mock from 'mockjs';
 const Random = Mock.Random;
 Random.cname();
 Random.guid();
 Random.extend({
  sex:function(data){
   var arr=["男","女"]
   //随机选取
   return this.pick(arr)
  }});
  export default {
 name:"detail",
 data:function(){
   return {
     text:"",
   }
 },
 methods:{
  mockInfo(){

   let data = Mock.mock({
    // 属性 list 的值是一个数组,其中含有 1 到 10 个元素
    'list|1-20': [{
     // 属性 id 是一个自增数,起始值为 1,每次增 1
     'uuid':'@guid()',
     'name' :'@cname()',
     'age|20-35' : 20,
     'sex' : "@sex",
    }]
   })
// 输出结果
   return data
  },
 },
 mounted:function(){
  this.text=JSON.stringify(this.mockInfo(), null, 4);
 }
}
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS onmousemove鼠标移动坐标接龙DIV效果实例
Dec 16 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
Sep 26 Javascript
通过原生JS实现为元素添加事件的方法
Nov 23 Javascript
Bootstrap CSS布局之表格
Dec 17 Javascript
简单实现js点击展开二级菜单功能
May 16 Javascript
记录一篇关于redux-saga的基本使用过程
Aug 18 Javascript
学习使用ExpressJS 4.0中的新Router的用法
Nov 06 Javascript
vue-cli3+typescript初体验小结
Feb 28 Javascript
ES7之Async/await的使用详解
Mar 28 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
Jun 05 Javascript
jquery实现上传图片功能
Jun 29 jQuery
微信小程序实现日历签到
Sep 21 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
Dec 19 #Javascript
vue使用Google地图的实现示例代码
Dec 19 #Javascript
JS实现获取自定义属性data值的方法示例
Dec 19 #Javascript
vue动态绑定class选中当前列表变色的方法示例
Dec 19 #Javascript
js指定日期增加指定月份的实现方法
Dec 19 #Javascript
动态内存分配导致影响Javascript性能的问题
Dec 18 #Javascript
关于node-bindings无法在Electron中使用的解决办法
Dec 18 #Javascript
You might like
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
定义php常量的详解
2013/06/09 PHP
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
WordPress中is_singular()函数简介
2015/02/05 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
php解决安全问题的方法实例
2019/09/19 PHP
Laravel (Lumen) 解决JWT-Auth刷新token的问题
2019/10/24 PHP
jquery 无限级联菜单案例分享
2013/03/26 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
2013/12/05 Javascript
js实现带圆角的多级下拉菜单效果
2015/08/28 Javascript
javascript Slip.js实现整屏滑动的手机网页
2015/11/25 Javascript
JavaScript类型系统之基本数据类型与包装类型
2016/01/06 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
Angularjs中controller的三种写法分享
2016/09/21 Javascript
详细讲解JavaScript中的this绑定
2016/10/10 Javascript
JS实现中文汉字按拼音排序的方法
2017/10/09 Javascript
vue项目中用cdn优化的方法
2018/01/03 Javascript
javascript的惯性运动实现代码实例
2019/09/07 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
[51:11]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS DT
2014/05/22 DOTA
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
python基础教程之面向对象的一些概念
2014/08/29 Python
Android 兼容性问题:java.lang.UnsupportedOperationException解决办法
2017/03/19 Python
Python语言描述最大连续子序列和
2017/12/05 Python
python图像和办公文档处理总结
2019/05/28 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
python中前缀运算符 *和 **的用法示例详解
2020/05/28 Python
家乐福巴西网上超市:Carrefour巴西
2016/10/31 全球购物
小天鹅官方商城:LittleSwan
2017/06/16 全球购物
三星英国官网:Samsung英国
2018/09/25 全球购物
三爱活动实施方案
2014/03/19 职场文书
小学三八妇女节活动总结
2015/02/06 职场文书
入党自荐书范文
2015/03/05 职场文书
预备党员考察意见范文
2015/06/01 职场文书
Python基于百度AI实现抓取表情包
2021/06/27 Python
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android