Vue动态表单的应用详解
概述
??后台管理系统里面有非常多的表单需求,我们希望能够通过写一个json格式的数据,通过vue的循环动态地去渲染动态表单。并且能够在外部得到渲染出来的表单数据,从而做一个入库操作。
v-model的理解
??vue-model相当于给表单元素传递一个value,外部监听input事件。所以我们自己封装表单组件的时候也是可以传递一个value值,监听input事件获取输入的值。
业务应用场景 ??最近在写一个在线教育平台,发现在后台添加课程的时候,每个课程所需要的参数不一样(有的课程没有特殊参数),使用固定表单在这个场景下使用很不优雅,而且工作量巨大。为了解决这个问题,我们可以在添加课程的时候动态的展示出课程分类表单所需要的参数,获取输入的课程参数,构造数据,进行入库操作。
通过组件展示分类
{{ data.name }} ul {padding-left: 10rem; list-style: none; }.bg {background: orange; color: white; }
采用第三方组件监听分类的ID
import Vue from 'vue'export default new Vue();
课程添加页面
课程提交页面ul {padding-left: 10rem; list-style: none; } 保存课程
小结
简单的来说,就是我们在添加课程的时候选择分类,会以表单的形式动态展示出该分类下面我们必传的参数,用户添加课程,提高效率。
【Vue动态表单的应用详解】以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- VueX--VUE核心插件
- 动态组件与v-once指令
- 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件
- vue组件中为何data必须是一个函数()
- 用npm发布一个包的教程并编写一个vue的插件发布
- vuex|vuex 基础结构
- Vue源码分析—响应式原理(二)
- VueX(Vuex|VueX(Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式)