mockjs+vue頁面如何直接展示數據

這篇文章主要介紹了mockjs+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>

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