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 ...
随机推荐
- Linux 安装R包
https://www.cnblogs.com/jessepeng/p/10984983.html Linux 的R环境,可以通过anaconda jupyter notbook很容易的配置,见我之前 ...
- signup图片上传预览经常总结
html <html> <head> <meta charset="utf-8" /> <meta http-equiv="X- ...
- windows 删除文件或文件夹
删除文件夹 rd 文件夹名 (只能删除空文件夹) 删除整个文件夹及子文件所有 rd /s 文件夹名(删除该文件及子文件) 删除文件 del 文件名(删除该文件)
- HTML5和CSS3兼容清单
1.CSS3 2.CSS3选择器 3.HTML5 4.HTML5 From
- HDU 5172 GTY's gay friends （线段树）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5172 题意: 给你一个n个数的数组,m次询问,询问在[L, R] 这个区间里面有没有 [1, R-L+ ...
- 关闭Linux无用端口
关闭系统不必要的端口,增强系统安全,此处以关闭111端口为例进行说明. 1).查看本机正在监听的端口: [root@b ~]# netstat -tlnup Active Internet conne ...
- 爱好-超级IP：超级IP
ylbtech-爱好-超级IP:超级IP IP,是Intellectual Property的缩写,字面粗译为“知识产权”,特指具有长期生命力和商业价值的跨媒介内容运营.一个具有可开发价值的真正的I ...
- Eclipse Java工程转为Web工程步骤
找到工程的.project文件,在<natures>标签中增加以下两行配置:<nature>org.eclipse.wst.common.modulecore.ModuleCo ...
- Delphi XE2 之 FireMonkey 入门(2)
FireMonkey 的控件都是自己绘制的(而不是基于系统组件), 我想它们应该是基于一些基本图形; 就从基本图形开始吧. FMX.Objects 单元给出的类: TShape //基本图形的基类 T ...
- 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_04 IO字节流_11_字节输入流一次读取多个字节
参数带字节数组的 把字节数组转换为字符串 文件里面有ABCDE 再来读取一次 再来读取一次.读取的结果是ED 再来读取,-1到时输出了.但是还是把ED读取出来了. 原理 第一步创建流对象 第二部创建数 ...