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 相关文章推荐
javascript+mapbar实现地图定位
Apr 09 Javascript
浅析JavaScript中的常用算法与函数
Nov 21 Javascript
JS对文本框值的判断示例
Mar 10 Javascript
js模拟淘宝网的多级选择菜单实现方法
Aug 18 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
Jun 13 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
Jul 03 Javascript
js用类封装pop弹窗组件
Oct 08 Javascript
vue检测对象和数组的变化分析
Jun 30 Javascript
浅谈React碰到v-if
Nov 04 Javascript
小程序中this.setData的使用和注意事项
Aug 28 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
Oct 14 Javascript
JS数组的高级使用方法示例小结
Mar 14 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类
2008/04/09 PHP
PHP 图片文件上传实现代码
2010/12/29 PHP
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
初学Javascript的一些总结
2008/11/03 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
jquery SweetAlert插件实现响应式提示框
2015/08/18 Javascript
浅析JavaScript中的array数组类型系统
2016/07/18 Javascript
AngularJs验证重复密码的方法(两种)
2016/11/25 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
2020/12/31 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
jQuery Form表单取值的方法
2017/01/11 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
2017/02/24 Javascript
浅谈通过JS拦截 pushState和replaceState事件
2017/07/21 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
2018/10/29 Javascript
python fabric实现远程操作和部署示例
2014/03/25 Python
Python函数参数操作详解
2018/08/03 Python
深入浅析Python获取对象信息的函数type()、isinstance()、dir()
2018/09/17 Python
对python_discover方法遍历所有执行的用例详解
2019/02/13 Python
pytorch在fintune时将sequential中的层输出方法,以vgg为例
2019/08/20 Python
K最近邻算法(KNN)---sklearn+python实现方式
2020/02/24 Python
雅高酒店中国:Accorhotels.com China
2018/03/26 全球购物
亚马逊加拿大网站:Amazon.ca
2020/01/06 全球购物
优秀教师先进事迹
2014/01/22 职场文书
关于读书的演讲稿300字
2014/08/27 职场文书
竞选纪律委员演讲稿
2014/09/13 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
党风廉正建设个人工作总结
2015/03/06 职场文书
2015年会计年终工作总结
2015/05/26 职场文书
导游词之秦始皇兵马俑博物馆
2019/09/29 职场文书
JS如何实现基于websocket的多端桥接平台
2021/05/14 Javascript
Python图片检索之以图搜图
2021/05/31 Python
vue代码分块和懒加载非必要资源文件
2022/04/11 Vue.js