mockjs+vue頁面如何直接展示數(shù)據(jù)

這篇文章主要介紹了mockjs+vue頁面如何直接展示數(shù)據(jù)，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

一、導(dǎo)讀

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

mockjs官網(wǎng)鏈接

關(guān)于mockjs，官網(wǎng)描述的是

1.前后端分離

2.不需要修改既有代碼，就可以攔截 Ajax 請求，返回模擬的響應(yīng)數(shù)據(jù)。

3.數(shù)據(jù)類型豐富

4.通過隨機數(shù)據(jù)，模擬各種場景。

等等優(yōu)點。

二、安裝mockJS

//安裝mockJS
npm install mockjs

不說廢話，貼代碼。

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

引用

import Mock from 'mockjs';

注意

• 使用 <pre> 標(biāo)簽?zāi)芨袷交敵?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>

感謝你能夠認真閱讀完這篇文章，希望小編分享的“mockjs+vue頁面如何直接展示數(shù)據(jù)”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!