vueelement动态表单,vue动态标签
本文主要详细介绍Vue动态表单的应用。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
概述
后台管理系统中有大量的表单需求。我们希望通过写一个json格式的数据，通过vue的循环，动态渲染动态表单。并且可以对外获取渲染后的表单数据，进行入库操作。
v-model的理解
vue-model相当于将value,外部监听输入事件传递给表单元素。所以我们自己封装表单组件的时候，也可以传递一个value的值，监听input事件来获取输入值。
输入类型=text v-model=thing
！-等于-
input type= text v-bind:value= thing
v-on:input= thing=$ event . target . value
业务应用场景
最近写了一个在线教育平台，发现在后台添加课程的时候，每个课程需要的参数都不一样(有些课程没有专门的参数)。在这种场景下使用固定的表单并不优雅，而且工作量巨大。为了解决这个问题，我们可以在添加课程时动态显示课程分类表的所需参数，获取输入的课程参数，构造数据，进行入库操作。
通过组件展示分类
！- reply.vue -
模板
差异
里
div v-if=data.id！=0 @ click= getfid(data . id):id= data . id { { data . name } }/div
ul v-if=数据.儿童数据.儿童.长度0
回复v-for= child in data . children :key= child . id :data= child /
/ul
/李
/div
/模板
脚本
从导入总线。/bus . js ；
导出默认值{
//声明名称
姓名：回复，
道具：[数据]，
//声明组件
组件：{}，
//声明变量
data() {
返回{
fid: 0，
}
},
//自定义过滤器
过滤器：{
myfilter:函数(值){
value=value.slice(0，3)；
返回值“* * * * * * * *”；
}
},
//初始化方法
已安装(){
},
//声明方法
方法：{
//点击分类id
getfid:函数(fid) {
this.fid=fid
//console . log(this . FID)；
公交车。$emit(msg ，FID)；
localStorage.setItem(fid ，this . FID)；
//取消所有突出显示
var divs=document . getelementsbyclassname( BG )；
//遍历选择器
for(var I=divs . length-1；I=0；我- ) {
//取消高亮显示
divs[I]. class list . remove( BG )；
}
//首先突出显示当前元素
var my div=document . getelementbyid(FID)；
//动态添加突出显示的类选择器
mydiv . class list . add( BG )；
}
}
}
/脚本
风格
ul {
左填充：10雷姆；
列表样式：无；
}。血糖
背景：橙色；
颜色：白色；
}
/风格
使用第三方组件的ID来监控分类。
！- bus.js -
从“vue”导入Vue
导出默认的新Vue()；
课程添加页面
模板
差异
正面/正面
H1课程提交页面/h1
回复：data=mydata/
范电池组
van-field label= course title v-model= title /
Van-field label=课程描述 v-model= desc rows= 5 type= textarea /
Van-field label=球场价格 v-model=价格/
参数中的div v-for=(值，键，索引
van-field:label= key v-model= info[key]/
/div
van-button color= gray @ click= add course 保存课程/van-button
/van单元组
/div
/模板
脚本
//导入其他组件
从导入总线。/bus . js ；
从导入答复。/回复；
从导入标题。/heads ；
导出默认值{
//声明组件
组件：{
回复:回复，
“头”:头，
},
//构造方法
已创建(){
//监控
公交车。$on(msg ，target={
console.log(目标)；
this.fid=target
if (this.cid===0) {
this.get_cate
}否则{
这个. toast.fail(您已经保存过课程了，无法再次选择分类);
返回错误的
}
});
},
//声明变量
data() {
返回{
//数据
我的数据：{},
//课程分类编号
fid: localStorage.getItem(fid )，
标题： ,
价格： ,
desc: ，
cid: 0，
视频：[],
videosrc: ，
参数：{},
信息：{}
}
},
//初始化方法
已安装(){
这个。get _ data()；
},
//声明方法
方法：{
get_cate(fid) {
这个。axios。get( http://localhost:5000/get cate/，{params: {fid: fid}}).然后（结果={
var my params=result。数据。params
if (myparams===) {
myparams=null
}
myparams=JSON.parse(myparams)
this.params=myparams
对于(这个。参数中的变量键){
这个. set(this.info，key，)
}
console.log(this.info)
})
},
//添加课程
addcourse: function () {
定义变量列表=[];
对于(这个。信息中的变量键){
lists.push({key: key， value: this.info[key]， label: this.params[key]})
}
var list_str=JSON.stringify(列表)
var data_post={
fid:这个。fid，
标题：this.title，
desc:这个。desc，
价格：this.price，
id:本地存储。getitem( user _ id )，
}
if (lists.length 0) {
data_post={
fid:这个。fid，
标题：this.title，
desc:这个。desc，
价格：this.price，
id:本地存储。getitem( user _ id )，
params:list_str
}
}
this.axios.post(
http://localhost:5000/addcourse/，
this.qs.stringify(data_post))。然后((结果)={
if (result.data.code===200) {
这个 toast.success(课程添加成功);
这个。cid=结果。数据。cid
}否则{
这个100美元的吐司。失败(结果。数据。味精)；
}
});
},
//获取数据
get_data: function () {
//发送请求
this.axios.get(
http://localhost:5000/catelist/).然后((结果)={
console.log(结果);
//声明根节点
var mytree={id: 0，name: }；
mytree[ children ]=结果。数据；
这个。我的数据=我的树；
控制台。日志(这个。我的数据)；
});
}
}
}
/脚本
样式范围
ul {
左填充：10雷姆；
列表样式：无；
}
/风格
小结
简单的来说，就是我们在添加课程的时候选择分类，会以表单的形式动态展示出该分类下面我们必传的参数，用户添加课程，提高效率。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。