国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

mockjs+vue頁面直接展示數據的方法

2019-11-19 12:19:46
字體:
來源:轉載
供稿:網友

最近想往數據庫里導一些數據,同事推薦了mock,了解一下覺得不錯,現將在vue用的mock貼上來

寫在前默認看此文的盆友都是有vue基礎的喲~~

一、導讀

將 mockjs 的數據直接展示在 vue 頁面上

mockjs官網鏈接

關于mockjs,官網描述的是

1.前后端分離

2.不需要修改既有代碼,就可以攔截 Ajax 請求,返回模擬的響應數據。

3.數據類型豐富

4.通過隨機數據,模擬各種場景。

等等優點。

二、安裝mockJS

//安裝mockJSnpm install mockjs

不說廢話,貼代碼。

三、將 mockjs 的數據直接展示在 vue 頁面上

引用

import Mock from 'mockjs';

注意

  • 使用 <pre> 標簽能格式化輸出 json 代碼
  • 使用 mockjs 的隨機函數 Random 要先定義常量
  • 自定義隨機函數用 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 的值是一個數組,其中含有 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>

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 砚山县| 固安县| 绩溪县| 江都市| 开平市| 诸城市| 和田市| 七台河市| 玉田县| 当涂县| 桐乡市| 虎林市| 顺义区| 察哈| 手游| 衡南县| 长宁县| 安义县| 晴隆县| 松阳县| 洪江市| 西畴县| 定襄县| 崇仁县| 汝阳县| 陕西省| 尉氏县| 沁阳市| 海城市| 柘荣县| 北川| 蒲江县| 于都县| 福海县| 鲁甸县| 黎城县| 淮安市| 庆元县| 东辽县| 闵行区| 灯塔市|