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)文章

Vue中l(wèi)ocalStorage那些你不知道的知識分享
在Vue.js中，?Vuex是一個(gè)強(qiáng)大的狀態(tài)管理工具，而localStorage則是一種用于存儲和獲取本地?cái)?shù)據(jù)的機(jī)制，雖然這兩個(gè)東西都可以用來存儲數(shù)據(jù)，但它們之間還是有很大的區(qū)別，本文就來簡單說說吧
2023-05-05
Vue使用electron轉(zhuǎn)換項(xiàng)目成桌面應(yīng)用方法介紹
Electron也可以快速地將你的網(wǎng)站打包成一個(gè)原生應(yīng)用發(fā)布,下面這篇文章主要給大家介紹了關(guān)于Vue和React中快速使用Electron的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11
Vue在頁面右上角實(shí)現(xiàn)可懸浮/隱藏的系統(tǒng)菜單
這篇文章主要介紹了Vue在頁面右上角實(shí)現(xiàn)可懸浮/隱藏的系統(tǒng)菜單,實(shí)現(xiàn)思路大概是通過props將showCancel這個(gè)Boolean值傳遞到子組件，對父子組件分別綁定事件，來控制這個(gè)系統(tǒng)菜單的顯示狀態(tài)。需要的朋友可以參考下
2018-05-05
vue 使用axios 數(shù)據(jù)請求第三方插件的使用教程詳解
這篇文章主要介紹了vue 使用axios 數(shù)據(jù)請求第三方插件的使用 ,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-07-07
VUE中v-on:click事件中獲取當(dāng)前dom元素的代碼
這篇文章主要介紹了VUE中v-on:click事件中獲取當(dāng)前dom元素的代碼，文中同時(shí)給大家提到了v-on：click獲取當(dāng)前事件對象元素的方法,需要的朋友可以參考下
2018-08-08
不能通過IP地址訪問VUE項(xiàng)目的問題及解決
這篇文章主要介紹了不能通過IP地址訪問VUE項(xiàng)目的問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue 設(shè)置路由的登錄權(quán)限的方法
這篇文章主要介紹了vue 設(shè)置路由的登錄權(quán)限的方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-07-07
Vue中Number方法將字符串轉(zhuǎn)換為數(shù)字的過程
這篇文章主要介紹了Vue中Number方法將字符串轉(zhuǎn)換為數(shù)字,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-06-06
vue中使用vue-cli接入融云實(shí)現(xiàn)即時(shí)通信
這篇文章主要介紹了vue中使用vue-cli接入融云實(shí)現(xiàn)即時(shí)通信的相關(guān)資料,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-04-04
vue3中的props組件抽離
這篇文章主要介紹了vue3中的props組件抽離，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04