最近想往數據庫里導一些數據，同事推薦了mock，了解一下覺得不錯，現將在vue用的mock貼上來
寫在前默認看此文的盆友都是有vue基礎的喲~~
一、導讀
將 mockjs 的數據直接展示在 vue 頁面上
關于mockjs，官網描述的是
1.前后端分離
2.不需要修改既有代碼，就可以攔截 Ajax 請求，返回模擬的響應數據。
3.數據類型豐富
4.通過隨機數據，模擬各種場景。
等等優點。
二、安裝mockJS
//安裝mockJSnpm install mockjs
不說廢話，貼代碼。
三、將 mockjs 的數據直接展示在 vue 頁面上
引用
import Mock from 'mockjs';
注意
代碼
<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 的值是一個數組，其中含有 1 到 10 個元素 'list|1-20': [{ // 屬性 id 是一個自增數，起始值為 1，每次增 1 'uuid':'@guid()', 'name' :'@cname()', 'age|20-35' : 20, 'sex' : "@sex", }] })// 輸出結果 return data }, }, mounted:function(){ this.text=JSON.stringify(this.mockInfo(), null, 4); }}</script>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
