虚拟企业获取网址参数值的方法

首先，让我们介绍一下获取URL参数的VueJS

Vuejs获取URL中参数的值

地址：http://localhost :3333/#/index？id=001

结果：001

console.log(这。$route.query.id)

PS:我们来介绍一下vue自定义表单生成器可以根据json参数动态生成表单效果

介绍

Form-create是一个表单生成器，可以通过JSON生成动态渲染、数据收集、验证和提交。并且支持任何Vue组件的生成。结合内置的17个常见表单组件和自定义组件，即使是复杂的表单也可以轻松处理。

文档|github

示范项目：开源优质微信商城

功能

自定义组件可以生成任何Vue组件

独立的数据验证很简单

松散转换为表单组件

通过JSON生成表单，通过Maker生成表单。强大的API可以快速操作表单双向数据绑定事件扩展本地更新数据验证网格布局内置组件17个常用表单组件的比较1.x

更快、更小、更强大的全局配置自定义组件更容易扩展，并且支持第三方UI库，错误示例更少

通过JSON创建表单

通过应用编程接口操作表单

@ form-创建包描述名称描述

名称描述@ @form-create/iview iview版本表单生成器@ form-create/element-ui element-ui版本表单生成器@ form-create/core form-create core package @ form-create/utils form-create toolkit @ form-create/data省市多级联动数据使用

以element-ui版本为例介绍如何在项目中使用form-create

装置

npm i @表单-创建/元素-用户界面

增加

全球注册

导入表单创建表单' @ form-create/element-ui '；vue . use(formCreate)；本地安装

导入表单创建表单' @ form-create/element-ui '；导出默认值{ components 3360 { formcreate 3360 formcreaet }。$ form ()}}生成一个表单

模板表单-创建v-model=' $ f' :规则=' rule ' @ on-submit=' on submit '/表单-创建/模板导出默认{ data(){ return {//表单实例对象$ f : }，//表单生成规则规则： [{type:' input '，field:' goods _ name '，title: '商品名称' }，{ type: ' date picker '，field3360' created _ at '，title3360}，方法： { onsubmit(formdata){//todo submit form } }；影响

实例对象$f

您可以通过$f快速操作表单，例如：

$f.hidden:隐藏指定的组件$f.validate:验证表单$f.setValue:修改表单组件$f.append:追加表单组件自定义组件

产生

由标签生成

{type:' El-button '，name:' BTN '，props: { type: ' primary '，field:' BTN '，loading 3360 true}，children3360 ['loading']}由模板生成

{type:' template '，name : ' BTN ' template : ' El-button 3360 loading=' loading ' { { text } } El-button '，VM : new vue({ data : { loading : true，text:' loading。

自定义组件转换成表单组件后，可以通过$ f.formdata、$ f.getvalue、$ f.setvalue、$ f.disabled等方式快速操作。以实现与内置组件相同的效果

预先确定

小道具

通过自定义组件中的道具接收属性

该值构成禁用组件的禁用状态，例如：

VM=Vue({ prop : { value : string，disabled:Boolean布尔值}})

输入事件

通过输入事件更新组件内部的值

当组件值改变时，通过输入事件更新该值。例如，

虚拟机。$emit('input '，NewValue)；

安装自定义组件

要生成的自定义组件必须通过Vue.component方法全局装入，或者通过formCreate.component方法装入

例如：

formcreate.component(' TestComponent '，组件)；或者.

Vue.component('TestComponent '，component)；产生

表单组件必须定义字段属性

数据

{type:“测试组件”，value:“测试”，field:“测试字段”，title:“自定义组件”}Maker

formcreate.maker.create的示例(' testcomponent '，' testfield '，' custom component ')。值(“测试”)

自定义计数器按钮组件以获取按钮点击次数。该组件的功能与内置组件的功能相同

form create . maker . template(' El-button @ click=' onclick ' long : disabled=' disabled ' counter-{ { num } }/El-button '、New Vue({ prop : }//预定义disabled3360 boolean、value: number、}、data : function(){ return { num : this。value，}}，watch: {value (n) {this。num=n；} }，methods : { OnClick : function(){ this . num；//更新该值。组件内部的$emit('input '，this . num)；}、}、})、“tmp”、“自定义标题”)。值(100)。道具('禁用'，假)完整示例

摘要

边肖推出的vue自定义表单生成器可以根据json参数动态生成表单，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！