mockjs+vue頁面如何直接展示數(shù)據(jù)-創(chuàng)新互聯(lián)

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

公司專注于為企業(yè)提供網(wǎng)站建設(shè)、成都網(wǎng)站制作、微信公眾號開發(fā)、商城網(wǎng)站開發(fā)，微信小程序開發(fā)，軟件定制網(wǎng)站設(shè)計等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。憑借多年豐富的經(jīng)驗，我們會仔細(xì)了解各客戶的需求而做出多方面的分析、設(shè)計、整合，為客戶設(shè)計出具風(fēng)格及創(chuàng)意性的商業(yè)解決方案，成都創(chuàng)新互聯(lián)公司更提供一系列網(wǎng)站制作和網(wǎng)站推廣的服務(wù)。

一、導(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.通過隨機(jī)數(shù)據(jù)，模擬各種場景。

等等優(yōu)點。

二、安裝mockJS

//安裝mockJS
npm install mockjs

不說廢話，貼代碼。

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

引用

import Mock from 'mockjs';

注意

使用 <pre> 標(biāo)簽?zāi)芨袷交敵?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 的值是一個數(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>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“mockjs+vue頁面如何直接展示數(shù)據(jù)”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司，關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

新聞名稱：mockjs+vue頁面如何直接展示數(shù)據(jù)-創(chuàng)新互聯(lián)
當(dāng)前URL：http://muchs.cn/article4/ipooe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、企業(yè)網(wǎng)站制作、靜態(tài)網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計公司、全網(wǎng)營銷推廣

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容