mockjs+vue頁面直接展示數(shù)據(jù)的方法
更新時間：2018年12月19日 09:44:10 作者：張一井
這篇文章主要介紹了mockjs+vue頁面直接展示數(shù)據(jù)的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
最近想往數(shù)據(jù)庫里導一些數(shù)據(jù)，同事推薦了mock，了解一下覺得不錯，現(xiàn)將在vue用的mock貼上來
寫在前默認看此文的盆友都是有vue基礎(chǔ)的喲~~
一、導讀
將 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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了element表格變化后自動刷新的兩種方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
這篇文章主要介紹了基于vue如何發(fā)布一個npm包的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
這篇文章主要介紹了vue/cli和vue版本對應(yīng)及安裝方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vuex 的 store 接受 plugins 選項，這個選項暴露出每次 mutation 的鉤子。Vuex 插件就是一個函數(shù)，這篇文章主要介紹了vuex 中插件的編寫案例,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-06-06
本文主要介紹了常見路由跳轉(zhuǎn)的幾種方式，主要介紹了四種常見方式，具有一定的參考價值，感興趣的可以了解一下2023-09-09
解決$store.getters調(diào)用不執(zhí)行的問題
今天小編就為大家分享一篇解決$store.getters調(diào)用不執(zhí)行的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue element Cascader級聯(lián)選擇器解決最后一級顯示空白問題
這篇文章主要介紹了vue element Cascader級聯(lián)選擇器解決最后一級顯示空白問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
在Vue應(yīng)用中，有時我們需要實現(xiàn)文件預覽和打印的功能，比如，我們可能需要預覽并打印PDF文件、圖片文件等，本文將介紹如何在Vue中實現(xiàn)文件預覽和打印的功能，并提供相應(yīng)的代碼示例2023-06-06
Vue2+marked.js實現(xiàn)AI流式輸出的項目實踐
本文主要介紹了Vue2+marked.js實現(xiàn)AI流式輸出的項目實踐,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-04-04
這篇文章主要介紹了vue 父組件調(diào)用子組件方法及事件的相關(guān)資料，父組件傳入數(shù)組子組件循環(huán)來創(chuàng)建不同的組件模塊,所有事件都在子組件內(nèi)部.怎么實現(xiàn)這樣一個功能呢？接下來跟隨腳本之家小編一起看看吧2018-03-03