mockjs+vue页面直接展示数据

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

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

一、导读

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

mockjs官网链接

二、安装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>