vue动态生成表单
vue动态生成表单
一、下拉框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>v-for</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app"> <select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">{{ option.text }}
</option>
</select> <li v-for="(value,i) in addList" :key="value.id">
<input class="radio" type="radio" name="radios" v-bind:id="value.value" :value="value.value" v-model="radio" /> <!--用默认的i下标也可以-->
<label v-bind:for="value.value">{{value.value}}</label> <!--通过for 指定 上面元素的id 来触发选中-->
</li> </div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
options:[{ value:"用户1", text: "新选项1", checked: false },{ value: "用户2", text: "新选项2", checked: false }],//默认option列表
selected:"用户2",//option 默认选择项 addList:[{ value:"用1", text: "新项1", checked: false },{ value: "用2", text: "新项2", checked: false }],
radio:"用2",
},
methods:{
//函数
},created() {
//Vue 初始化的默认载入事件
this.options.push({ value:"用户3", text: "新选项3", checked: false });
},
});
</script>
</html>
二、多选框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>v-for</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app"> <select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">{{ option.text }}
</option>
</select> <li v-for="(value,i) in addList" :key="value.id" >
<input class="radio" type="radio" :disabled="disabled" name="radios" v-bind:id="value.value" :value="value.value" v-model="radio" /> <!--用默认的i下标也可以-->
<label v-bind:for="value.value">{{value.value}}</label> <!--通过for 指定 上面元素的id 来触发选中-->
</li> <div v-for="(checkOne,index) in checkList">
<input type="checkbox" :checked="checkStatusList.indexOf(checkOne.name)>=0">
<span>{{checkOne.name}}</span>
</div> </div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
options:[{ value:"用户1", text: "新选项1", checked: false },{ value: "用户2", text: "新选项2", checked: false }],//默认option列表
selected:"用户2",//option 默认选择项 addList:[{ value:"用1", text: "新项1", checked: false },{ value: "用2", text: "新项2", checked: false }],
radio:"用2",
disabled:true,//设为true即可禁止按钮点击
checkList:[
{'name':'老王'},
{'name':'小张'},
{'name':'王伯'}
],
checkStatusList:['老王']//
},
methods:{
//函数
},created() {
//Vue 初始化的默认载入事件
this.options.push({ value:"用户3", text: "新选项3", checked: false });
},computed:{
// a computed getter },
});
</script>
</html>
优化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>v-for</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app"> <select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">{{ option.text }}
</option>
</select> <li v-for="(value,i) in addList" :key="value.id" >
<input class="radio" type="radio" :disabled="disabled" name="radios" v-bind:id="value.value" :value="value.value" v-model="radio" /> <!--用默认的i下标也可以-->
<label v-bind:for="value.value">{{value.value}}</label> <!--通过for 指定 上面元素的id 来触发选中-->
</li> <div v-for="(checkOne,index) in checkList">
<input type="checkbox" :checked="checkStatusList.indexOf(checkOne.id)>=0">
<span>{{checkOne.name}}</span>
</div> </div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
options:[{ value:"用户1", text: "新选项1", checked: false },{ value: "用户2", text: "新选项2", checked: false }],//默认option列表
selected:"用户2",//option 默认选择项 addList:[{ value:"用1", text: "新项1", checked: false },{ value: "用2", text: "新项2", checked: false }],
radio:"用2",
disabled:true,//设为true即可禁止按钮点击
checkList:[
{id:1,'name':'老王'},
{id:2,'name':'小张'},
{id:3,'name':'王伯'}
],
checkStatusList:[1,3]//
},
methods:{
//函数
},created() {
//Vue 初始化的默认载入事件
this.options.push({ value:"用户3", text: "新选项3", checked: false });
},computed:{
// a computed getter },
});
</script>
</html>
一、禁止点击
<button type="button" :disabled="disabled"></button>
data:{
disabled:false//设为true即可禁止按钮点击
}
具体代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>v-for</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app"> <select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">{{ option.text }}
</option>
</select> <li v-for="(value,i) in addList" :key="value.id" >
<input class="radio" type="radio" :disabled="disabled" name="radios" v-bind:id="value.value" :value="value.value" v-model="radio" /> <!--用默认的i下标也可以-->
<label v-bind:for="value.value">{{value.value}}</label> <!--通过for 指定 上面元素的id 来触发选中-->
</li> </div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
options:[{ value:"用户1", text: "新选项1", checked: false },{ value: "用户2", text: "新选项2", checked: false }],//默认option列表
selected:"用户2",//option 默认选择项 addList:[{ value:"用1", text: "新项1", checked: false },{ value: "用2", text: "新项2", checked: false }],
radio:"用2",
disabled:true//设为true即可禁止按钮点击
},
methods:{
//函数
},created() {
//Vue 初始化的默认载入事件
this.options.push({ value:"用户3", text: "新选项3", checked: false });
},computed:{
// a computed getter },
});
</script>
</html>
拓展
vue遍历select中option
可以在便利的option中加一层template
<select>
<template v-for='(li,index) in list'>
<option>{{li}}</option>
</template>
</select>
具体代码
从数据库map映射下
拓展
<select class="BonusType" v-model="selected[0]" v-bind:disabled="disabled[0]" v-on:click="SelectClick">
<option v-bind:value="Item.id" v-for="Item in BonusType" v-bind:disabled="isActive[Item.id-1]?'disabled':null">{{Item.text}}</option>
</select>
vue动态生成表单的更多相关文章
- vue自定义表单生成器,可根据json参数动态生成表单
介绍 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue 组件.结合内置17种常用表单组件和自定义组件,再复杂的表单都可 ...
- Jquery 动态生成表单 并将表单数据 批量通过Ajax插入到数据库
利用Jquery 动态生成 Table 表单 之后利用each 方法来遍历所有文本框获取文本的value值 并通过Ajax 将数据 提交到Web服务里把数据插入数据库 Html页面 <!DOC ...
- MVC动态生成表单
1*书写方式 一.using语句可以不写结束标记,自动加上 服务端 客户端 默认提交当前控制器和操作方法 二.开始与结束代码都写 服务端 客户端 三.一些常用的重载方法 (1)要提交的控制器,和操作方 ...
- Asp.net动态生成表单
control.ascx <%@ Control Language="C#" AutoEventWireup="true" CodeBehind=&quo ...
- .NET Core的响应式框架,基于Ace Admin框架菜单导航,Bootstrap布局,fontAwesome图标,内嵌Iframe用EasyUI做数据绑定,动态配置列表,动态配置表单
netnrf 响应式框架 用于快速开发的响应式框架 演示:https://rf2.netnr.com v3.x 前端采用 jQuery + Bootstrap + EasyUI + AceAdmin ...
- 使用Vue动态生成form表单
form-create 表单生成器 具有数据收集.校验和提交功能的表单生成器,支持双向数据绑定和事件扩展,组件包含有复选框.单选框.输入框.下拉选择框等表单元素以及省市区三级联动,时间选择,日期选择, ...
- 基于PHP和mysql的自动生成表单
开发背景:公司要求管理系统能够由管理员在前台页面管理系统表单,能够对表单进行增删改查基本操作,表单的各个字段都可以被修改.删除,可以添加新的字段,并且不影响系统正常运行,前台表单展示要由系统自动处理, ...
- 表单组件 form fastadmin（生成表单元素）
Form组件 定义文件位置: /extend/fast/Formphp 通用参数 $name 通常为我们组件的名称(name属性值),我们在后台接收时可以通过这个名称来获取到它所对应的值 $value ...
- js 动态添加表单 table tr
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 【BZOJ1132】Tro（叉积）
题意:平面上有N个点. 求出所有以这N个点为顶点的三角形的面积和 N<=3000 N个点的坐标,其值在[0,10000] 思路:按从左到右的预处理点排序 每次枚举最左点作为原点,把叉积从大到小排 ...
- MySQL Password Expired
好久没有登录MySQL,登录的时候遇到如下提示: 尝试使用命令行登录,发现是可以使用之前的密码登录的,如下: 只是登录之后,发现做不了什么操作.并且使用,alter 语句重设密码也没有成功,如下: 试 ...
- IBM Security App Scan Standard 工具的使用
1.AppScan是什么? AppScan是IBM的一款web安全扫描工具,可以利用爬虫技术进行网站安全渗透测试,根据网站入口自动对网页链接进行安全扫描,扫描之后会提供扫描报告和修复建议等. AppS ...
- Django的media配置与富文本编辑器使用的实例
效果预览 文章列表 添加文章 编辑文章|文章详情|删除文章 项目的基本文件 项目的Model from django.db import models # 导入富文本编辑器相关的模块 from cke ...
- vue引入静态js文件
由于一些演示,需要对编码名称等可快速进行修改,需要页面方便配置.由于build后的vue项目基本已经看不出原样,因此需要创建一个文件,并在打包的时候不会进行编译. vue-cli 2.0的作法是在st ...
- CSS- 层叠和继承
层叠和继承 - 学习 Web 开发 | MDN 优先级 - CSS:层叠样式表 | MDN 继承 - CSS:层叠样式表 | MDN CSS 层叠 - CSS:层叠样式表 | MDN
- python 定时器，轮询定时器
首先想要实现的效果是:每隔1段时间,就去调用1个接口确认结果,直到接口返回的结果为true,停止调用 所以这里会用到python的定时器 先来了解最简单的定时器: python 定时器默认定时器只执行 ...
- UI自动化之特殊处理四（获取元素属性\爬取页面源码\常用断言）
获取元素属性\爬取页面源码\常用断言,最终目的都是为了验证我们实际结果是否等于预期结果 目录 1.获取元素属性 2.爬取页面源码 3.常用断言 1.获取元素属性 获取title:driver.titl ...
- WPF与DevExpress之——实现类似于安装程序下一步下一步的样式窗体
话不多说先上图 点击下一步 跳转到第二页 项目准备: 1.DevExpress 19/18/17(三个版本都可以) 2.Vs2019 3..Net framework>4.0 项目结构: ...
- 【ABAP系列】SAP 销售订单的行项目里条件的增强
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP 销售订单的行项目里条件的 ...