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 相关文章推荐
Code: write(s,d) 输出连续字符串
Aug 19 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
Jul 08 Javascript
表头固定(利用jquery实现原理介绍)
Nov 08 Javascript
js 字符串转换成数字的三种方法
Mar 23 Javascript
12种不宜使用的Javascript语法整理
Nov 04 Javascript
javascript实现多级联动下拉菜单的方法
Feb 06 Javascript
jquery代码实现简单的随机图片瀑布流效果
Apr 20 Javascript
AngularJS实现单独作用域内的数据操作
Sep 05 Javascript
JavaScript 数组的进化与性能分析
Sep 18 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
Mar 21 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 Javascript
详解如何使用node.js的开发框架express创建一个web应用
Dec 20 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
解析PHP中一些可能会被忽略的问题
2013/06/21 PHP
php创建无限级树型菜单
2015/11/05 PHP
PHP count()函数讲解
2019/02/03 PHP
PHP面向对象类型约束用法分析
2019/06/12 PHP
PHP使用DOM对XML解析处理操作示例
2019/07/04 PHP
通过jQuery源码学习javascript(一)
2012/12/27 Javascript
Javascript无阻塞加载具体方式
2013/06/28 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
2014/06/09 Javascript
浅谈javascript的Touch事件
2015/09/27 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
BootStrap中Datepicker控件带中文的js文件
2016/08/10 Javascript
Bootstrap笔记之缩略图、警告框实例详解
2017/03/09 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
Nodejs中Express 常用中间件 body-parser 实现解析
2017/05/22 NodeJs
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
详解NodeJs开发微信公众号
2018/05/25 NodeJs
vue采用EventBus实现跨组件通信及注意事项小结
2018/06/14 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
JS制作简易计算器的实例代码
2020/07/04 Javascript
[04:28]DOTA2亚洲邀请赛小组赛第五日 TOP10精彩集锦
2015/02/03 DOTA
python中List的sort方法指南
2014/09/01 Python
一些Centos Python 生产环境的部署命令(推荐)
2018/05/07 Python
Python使用pymysql从MySQL数据库中读出数据的方法
2018/07/25 Python
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
对Python协程之异步同步的区别详解
2019/02/19 Python
Python实现去除图片中指定颜色的像素功能示例
2019/04/13 Python
对python中的控制条件、循环和跳出详解
2019/06/24 Python
python使用opencv在Windows下调用摄像头实现解析
2019/11/26 Python
使用Python画了一棵圣诞树的实例代码
2020/11/27 Python
韩都衣舍天猫官方旗舰店:天猫女装销售总冠军
2017/10/10 全球购物
Grow Gorgeous美国官网:只要八天,体验唤醒毛囊后新生的茂密秀发
2018/06/04 全球购物
班班通校本培训方案
2014/03/12 职场文书
工程承诺书怎么写
2014/05/24 职场文书
工作简报范文
2015/07/21 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书
Linux安装Docker详细教程
2022/07/07 Servers