最近想往數(shù)據(jù)庫里導一些數(shù)據(jù)，同事推薦了mock弓摘，了解一下覺得不錯，現(xiàn)將在vue用的mock貼上來
寫在前默認看此文的盆友都是有vue基礎的喲~~
一、導讀
- 將
mockjs的數(shù)據(jù)直接展示在vue頁面上
二微猖、安裝mockJS
//安裝mockJS
npm install mockjs
不說廢話，貼代碼缘屹。
三、將mockjs的數(shù)據(jù)直接展示在vue頁面上
引用
import Mock from 'mockjs';
注意
- 使用
<pre>標簽能格式化輸出json代碼 - 使用
mockjs的隨機函數(shù)Random要先定義常量 - 自定義隨機函數(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=["男","女"]
//隨機選取
return this.pick(arr)
}});
export default {
name:"detail",
data:function(){
return {
text:"",
}
},
methods:{
mockInfo(){
let data = Mock.mock({
// 屬性 list 的值是一個數(shù)組侠仇，其中含有 1 到 10 個元素
'list|1-20': [{
// 屬性 id 是一個自增數(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>
