mockjs+vue頁面直接展示數(shù)據(jù)的方法
更新時間：2018年12月19日 09:44:10 作者：張一井
這篇文章主要介紹了mockjs+vue頁面直接展示數(shù)據(jù)的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
最近想往數(shù)據(jù)庫里導(dǎo)一些數(shù)據(jù)，同事推薦了mock，了解一下覺得不錯，現(xiàn)將在vue用的mock貼上來
寫在前默認看此文的盆友都是有vue基礎(chǔ)的喲~~
一、導(dǎo)讀
將 mockjs 的數(shù)據(jù)直接展示在 vue 頁面上
關(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> 標簽?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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue中l(wèi)ocalStorage那些你不知道的知識分享
在Vue.js中，?Vuex是一個強大的狀態(tài)管理工具，而localStorage則是一種用于存儲和獲取本地數(shù)據(jù)的機制，雖然這兩個東西都可以用來存儲數(shù)據(jù)，但它們之間還是有很大的區(qū)別，本文就來簡單說說吧2023-05-05
Vue使用electron轉(zhuǎn)換項目成桌面應(yīng)用方法介紹
Electron也可以快速地將你的網(wǎng)站打包成一個原生應(yīng)用發(fā)布,下面這篇文章主要給大家介紹了關(guān)于Vue和React中快速使用Electron的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
Vue在頁面右上角實現(xiàn)可懸浮/隱藏的系統(tǒng)菜單
這篇文章主要介紹了Vue在頁面右上角實現(xiàn)可懸浮/隱藏的系統(tǒng)菜單,實現(xiàn)思路大概是通過props將showCancel這個Boolean值傳遞到子組件，對父子組件分別綁定事件，來控制這個系統(tǒng)菜單的顯示狀態(tài)。需要的朋友可以參考下2018-05-05
vue 使用axios 數(shù)據(jù)請求第三方插件的使用教程詳解
這篇文章主要介紹了vue 使用axios 數(shù)據(jù)請求第三方插件的使用 ,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-07-07
VUE中v-on:click事件中獲取當(dāng)前dom元素的代碼
這篇文章主要介紹了VUE中v-on:click事件中獲取當(dāng)前dom元素的代碼，文中同時給大家提到了v-on：click獲取當(dāng)前事件對象元素的方法,需要的朋友可以參考下2018-08-08
這篇文章主要介紹了不能通過IP地址訪問VUE項目的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue 設(shè)置路由的登錄權(quán)限的方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-07-07
Vue中Number方法將字符串轉(zhuǎn)換為數(shù)字的過程
這篇文章主要介紹了Vue中Number方法將字符串轉(zhuǎn)換為數(shù)字,本文通過示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue中使用vue-cli接入融云實現(xiàn)即時通信的相關(guān)資料,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
這篇文章主要介紹了vue3中的props組件抽離，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04