代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mockjs</title>
<script src="./lib/mock-min.js"></script>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{login}}</p>
</div>
<script>
import Mock from 'mockjs'
const Random = Mock.Random;
const login = Mock.mock({
'bool':'@boolean',// 返回一个随机布尔值
'bool2':'@boolean(1,4,true)',// 返回一个随机的布尔值，true出现的概率为1/(1+4)
'natural':'@natural',//返回一个随机的自然数（大于等于 0 的整数）。
'natural2':'@natural(10)',//返回一个随机的自然数（大于等于 10 的整数）。
'natural3':'@natural(10,20)',//返回一个随机的自然数（大于等于10小于等于20的整数）。
'integer':'@integer',//返回一个随机的整数。
'integer2':'@integer(10)',//返回一个随机的整数（大于等于 10 的整数）。
'integer3':Random.integer(60, 100),//返回一个随机的整数（大于等于60小于等于100的整数）。
/**
* integer3':'@interger(60,100)' 这一项并不能拿到大于等于60小于等于100的整数，可能是系统bug
* */
'float1':'@float',//返回一个随机的浮点数。
'float2':'@float(0)',//返回一个随机的浮点数（大于等于0的浮点数）。
'float3':'@float(60, 100)',//返回一个随机的浮点数（大于等于60小于等于100的浮点数）。
'character1':'@character',//返回一个随机的字符。
'character2':'@character("lower")',//返回一个随机的小写字符。
'character3':'@character("upper")',//返回一个随机的大写字符。
'character4':'@character("number")',//返回一个随机的数字字符。
'character5':'@character("symbol")',//返回一个随机的符号字符。
'character6':'@character("aeiou")',//返回一个随机的字符(范围是"aeiou"其中之一)。
'string1':'@string',//返回一个随机的字符。
'string2':'@string("lower",1,5)',//返回一个随机的小写字符串，长度为1到5。
'string3':'@string("upper",1,5)',//返回一个随机的大写字符串，长度为1到5。
'string4':'@string("number",1,5)',//返回一个随机的数字字符串，长度为1到5。
'string5':'@string("symbol",1,5)',//返回一个随机的符号字符串，长度为1到5。
'string6':'@string("aeiou",1,5)',//返回一个随机的字符串(范围是"aeiou"其中之一)，长度为1到5。
'string7':'@string("upper",5)',//返回一个随机的大写字符串，长度为1到5。
'string8':'@string(3)',//返回一个随机的字符串,长度为3
'string9':'@string("壹贰叁肆伍陆柒捌玖拾",3)',//返回一个随机的字符串（范围是"壹贰叁肆伍陆柒捌玖拾"）,长度为3
'range1':'@range(10)',//返回一个整型数组,从1到10，不包含10。
'range2':'@range(3,7)',//返回一个整型数组，从3到5。
'range3':'@range(1,10,2)',//返回一个整型数组，从1到10，步长为2。
'date1':'@date',//返回一个随机的日期字符串。
'date2':'@date("yyyy-MM-dd")',//返回一个随机的日期字符串，格式为yyyy-MM-dd。
'time1':'@time',//返回一个随机的时间字符串。
'time2':'@time("A HH:mm:ss")',//返回一个随机的时间字符串,格式为A HH:mm:ss。
'datetime1':'@datetime("A HH:mm:ss")',//返回一个随机的时间字符串,格式为A HH:mm:ss。
'datetime2':'@datetime("yyyy-MM-dd A HH:mm:ss")',//返回一个随机的时间字符串,格式为A HH:mm:ss。
'now1':'@now()',//返回当前的日期和时间字符串。
'image1':'@img()',//返回一个随机大小和颜色的图片。
'image2':'@img(200x100)',//返回一个200*100大小的图片，*号为小写字母x。
'image3':'@img(200x100,#50B347)',//返回一个200*100大小,颜色为#50B347的图片。
'image4':'@img(200x100, #50B347,#fff,Mock.js)',//返回一个200*100大小,颜色为#50B347的图片。
'image5|1': [
require("../images/css.png"), //可以避免路径出错的问题
require("../images/jquery.jpg"),
require("../images/html.jpg")
],
/**
*
Random.image()
Random.image( size )
Random.image( size, background )
Random.image( size, background, text )
Random.image( size, background, foreground, text )
Random.image( size, background, foreground, format, text )
参数分别代表图片大小，背景色，前景色（文字），图片格式（默认为png,可选为jpg,png,gif）,图片上的文字
*/
'dataImage':'@dataImage(200x100, Hello Mock.js!)',//生成一个base64的图片
/**
* Random.dataImage( size, text )参数分别代表图片大小，前景色（文字）
* */
'color1':'@color',//生成随机颜色
'color2':'@hex',//生成随机颜色，格式为hex
'color3':'@rgb',//生成随机颜色，格式为rgb
'color4':'@rgba',//生成随机颜色，格式为rgba
'color5':'@hsl',//生成随机颜色，格式为hsl,色相(Hue)、饱和度(Saturation)和亮度(Lightness)
'paragraph':'@paragraph',//随机生成一段文本。
'paragraph2':'@paragraph(2)',//随机生成一段文本，句子个数为2。
'paragraph3':'@paragraph(1,4)',//随机生成一段文本，句子最小个数为1，最大个数为4。
'cparagraph1':'@cparagraph(1,4)',//随机生成一段中文文本，句子最小个数为1，最大个数为4。参数含义与上面的相同
'sentence1':'@sentence(1,4)',//随机生成一个句子，句子最小个数为1，最大个数为4。参数含义与上面的相同
'csentence1':'@csentence(1,4)',//随机生成一个句子，句子最小个数为1，最大个数为4。参数含义与上面的相同
'word':'@word(1,4)',//随机生成一个句子，句子最小个数为1，最大个数为4。参数含义与上面的相同
'cword':'@cword("壹贰叁肆伍陆柒捌玖拾",1,4)',//随机生成一个汉字，句子最小个数为1，最大个数为4。参数含义与上面的相同
'title':'@title(1,4)',//随机生成一个标题，单词中字符的个数最小个数为1，最大个数为4。
'title2':'@title(3)',//随机生成一个标题，单词中字符的个数个数为3。
'ctitle':'@ctitle(1,4)',//随机生成一个标题，单词中字符的个数最小个数为1，最大个数为4。
'name1':'@first',//随机生成一个英文名
'name2':'@last',//随机生成一个英文姓
'name3':'@name(true)',//随机生成一个英文名,true代表包含中间名
'cname1':'@cfirst',//随机生成一个中文姓
'cname2':'@clast',//随机生成一个中文名
'cname3':'@cname',//随机生成一个中文姓名
'web':'@url',//随机生成一个 URL。
'web2':'@url("http","nuysoft.com:3302")',//随机生成一个 URL,两个参数分别代表URL协议和指定 URL 域名和端口号。
'web3':'@domain',//随机生成一个域名。
'web4':'@protocol',//随机生成一个 URL 协议返回以下值之一：'http'、'ftp'、'gopher'、'mailto'、'mid'、'cid'、'news'、'nntp'、'prospero'、'telnet'、'rlogin'、'tn3270'、'wais'。
'web5':'@tld',//随机生成一个顶级域名
'email1':'@email',//随机生成一个邮件地址
'email2':'@email("sina.com")',//随机生成一个指定邮件地址
'ip':'@ip',//随机生成一个ip地址
'address1':'@region',//随机生成一个（中国）大区
'address2':'@province',//随机生成一个（中国）省（或直辖市、自治区、特别行政区）。
'address3':'@city',//随机生成一个（中国）市。
'address4':'@city(true)',//随机生成一个（中国）市,true代表是否生成省。
'address5':'@country(true)',//随机生成一个（中国）县,true代表是否生成省、市。
'address6':'@zip',//随机生成一个邮政编码（六位数字）。
/* 其他辅助占位符 */
'helper1':'@capitalize("hello")',//把字符串的第一个字母转换为大写。
'helper2':'@upper("hello")',//把字符串转换为大写。
'helper3':'@lower("hello")',//把字符串转换为小写。
'helper4':'@lower("hello")',//把字符串转换为小写。
'helper5':'@pick(["a", "e", "i", "o", "u"])',//从数组中随机选取一个元素，并返回。
/*与此相同：
"array|1": ["AMD","CMD", "UMD"]
}) */
'helper6':'@shuffle(["a", "e", "i", "o", "u"])',//打乱数组中元素的顺序，并返回。
'Miscellaneous':'@guid',//随机生成一个 GUID。
'Miscellaneous2':'@id',//随机生成一个 18 位身份证。
'Miscellaneous3':'@increment',//生成一个全局的自增整数。
'Miscellaneous4':'@increment(2)',//生成一个全局的自增整数，步长为2。
})
// Mock.mock('/api/login','get','@integer(60, 100)')
Mock.mock('/api/login','get',{
code:0,data:login
})
/*const tail = Mock.mock({
'list|5': [
{
'id|+1': 67,
'name':'@cname',
'dec|1':[
'隔离件与记录数量不符',
'报废箱内的报废件有一件没有红贴',
'Op400示数器电缆线未收，凳子无定置，不应该放在现场',
'隔离标签未明确填写隔离数量和零件号',
'其他问题'
],
'area|1': [
'GOB/GO1Phase 1/2','F3X-LINK working station','LC12'
],
'time':Random.date('yyyy-MM-dd'),
'state1|1':['待处理','观察项','已关闭'],
'state2|1':['待处理','观察项','已关闭']
}]
})*/
/*const info = Mock.mock({
'list1':
{
'id|+1': 67,
'name':'@cname',
'dec|1':[
'隔离件与记录数量不符',
'报废箱内的报废件有一件没有红贴',
'Op400示数器电缆线未收，凳子无定置，不应该放在现场',
'隔离标签未明确填写隔离数量和零件号',
'其他问题'
],
'area|1': [
'GOB/GO1Phase 1/2','F3X-LINK working station','LC12'
],
'time':Random.date('yyyy-MM-dd'),
'department|1':['开发部','运营部','推广部','后勤部'],
'supplier|1':['淘宝','京东','百度','新浪'],
'image':'@img(80x60,@color)',
}
})*/
/*const exec = Mock.mock({
'list|20':[
{
'label|+1': 1,
'name':'@cname',
'dec':'@cparagraph',
'value':''
}]
})*/
/*const tail = Mock.mock({
'list|5': [
{
'id|+1': 67,
'start': 20,
'name':'@cname',
'image':'@img(90x90,@color)',
'image2|1': [
require("../../images/menu1.png"), //可以避免路径出错的问题
require("../../images/menu2.png"),
require("../../images/menu3.png"),
]
}]
})*/
/*Mock.mock('/api/login','get',{
code:0,data:login
})*/
const vm = new Vue({
el:'#app',
data:{
login:[]
},
mounted(){
this.login = Mock.mock({
'list|5':[{
'id':null,
'author':'@cname',
'email':'@email'
}]
})
console.log(this.login)
}
})
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手