mockjs+vue頁面直接展示數(shù)據(jù)的方法

更新時(shí)間：2018年12月19日 09:44:10 作者：張一井

這篇文章主要介紹了mockjs+vue頁面直接展示數(shù)據(jù)的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

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

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

一、導(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)點(diǎn)。

二、安裝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 的值是一個(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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

element表格變化后自動刷新的兩種方案
本文主要介紹了element表格變化后自動刷新的兩種方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
基于vue如何發(fā)布一個(gè)npm包的方法步驟
這篇文章主要介紹了基于vue如何發(fā)布一個(gè)npm包的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
vue/cli和vue版本對應(yīng)及安裝方式
這篇文章主要介紹了vue/cli和vue版本對應(yīng)及安裝方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
vuex 中插件的編寫案例解析
Vuex 的 store 接受 plugins 選項(xiàng)，這個(gè)選項(xiàng)暴露出每次 mutation 的鉤子。Vuex 插件就是一個(gè)函數(shù)，這篇文章主要介紹了vuex 中插件的編寫案例,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-06-06
vue常見路由跳轉(zhuǎn)的幾種方式小結(jié)
本文主要介紹了常見路由跳轉(zhuǎn)的幾種方式，主要介紹了四種常見方式，具有一定的參考價(jià)值，感興趣的可以了解一下
2023-09-09
解決$store.getters調(diào)用不執(zhí)行的問題
今天小編就為大家分享一篇解決$store.getters調(diào)用不執(zhí)行的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
vue element Cascader級聯(lián)選擇器解決最后一級顯示空白問題
這篇文章主要介紹了vue element Cascader級聯(lián)選擇器解決最后一級顯示空白問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
在Vue中實(shí)現(xiàn)文件預(yù)覽與打印的代碼示例
在Vue應(yīng)用中，有時(shí)我們需要實(shí)現(xiàn)文件預(yù)覽和打印的功能，比如，我們可能需要預(yù)覽并打印PDF文件、圖片文件等，本文將介紹如何在Vue中實(shí)現(xiàn)文件預(yù)覽和打印的功能，并提供相應(yīng)的代碼示例
2023-06-06
Vue2+marked.js實(shí)現(xiàn)AI流式輸出的項(xiàng)目實(shí)踐
本文主要介紹了Vue2+marked.js實(shí)現(xiàn)AI流式輸出的項(xiàng)目實(shí)踐,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2025-04-04
vue 父組件調(diào)用子組件方法及事件
這篇文章主要介紹了vue 父組件調(diào)用子組件方法及事件的相關(guān)資料，父組件傳入數(shù)組子組件循環(huán)來創(chuàng)建不同的組件模塊,所有事件都在子組件內(nèi)部.怎么實(shí)現(xiàn)這樣一個(gè)功能呢？接下來跟隨腳本之家小編一起看看吧
2018-03-03