最近想往數(shù)據(jù)庫(kù)里導(dǎo)一些數(shù)據(jù)，同事推薦了mock，了解一下覺(jué)得不錯(cuò)，現(xiàn)將在vue用的mock貼上來(lái)

寫在前默認(rèn)看此文的盆友都是有vue基礎(chǔ)的喲~~

一、導(dǎo)讀

• 將mockjs的數(shù)據(jù)直接展示在vue頁(yè)面上

mockjs官網(wǎng)鏈接

二、安裝mockJS

//安裝mockJS
npm install mockjs

不說(shuō)廢話，貼代碼。

三、將mockjs的數(shù)據(jù)直接展示在vue頁(yè)面上

引用

import Mock from 'mockjs'; 

注意

• 使用<pre>標(biāo)簽?zāi)芨袷交敵?code>json代碼
• 使用mockjs的隨機(jī)函數(shù) Random要先定義常量
• 自定義隨機(jī)函數(shù)用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=["男","女"]
      //隨機(jī)選取
      return this.pick(arr)
    }});
    export default {
  name:"detail",
  data:function(){
      return {
          text:"",
      }
  },
  methods:{
    mockInfo(){

      let data = Mock.mock({
        // 屬性 list 的值是一個(gè)數(shù)組，其中含有 1 到 10 個(gè)元素
        'list|1-20': [{
          // 屬性 id 是一個(gè)自增數(shù)，起始值為 1，每次增 1
          'uuid':'@guid()',
          'name' :'@cname()',
          'age|20-35' : 20,
          'sex' : "@sex",
        }]
      })
// 輸出結(jié)果
      return data
    },
  },
  mounted:function(){
   this.text=JSON.stringify(this.mockInfo(), null, 4);
  }
}
</script>