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 ...
随机推荐
- CG-CTF | 综合题2
查源码发现一个文件读取:http://cms.nuptzj.cn/about.php?file=sm.txt,用它把能找到的php都读取下来 <?php if (!isset($_COOKIE[ ...
- 170903-关于MyBatis
MyBatis总体介绍: MyBatis实际上是Ibatis3.0版本以后的持久化层框架[也就是和数据库打交道的框架]! 和数据库打交道的技术有: 原生的JDBC技术--->Spring的Jd ...
- 【MySQL】 知识点记录
0. 定位和排查问题的常用语句 查询 正在执行的事务(这个输出有事物状态表明是否等待锁):SELECT * FROM information_schema.INNODB_TRX 查看正在锁的事务:SE ...
- docker 提高效率 network-bridging 桥接
安装的时间顺序 bit3 192.168.107.128 wredis 192.168.107.129 wmysql 192.168.107.130 wslave 192.168.107.131 w ...
- drf 视图源码详解
目录 mixin类和Generic类 CreateModelMixin 创建 ListModelMixin - 查看多条数据 RetrieveModelMixin 获取单条数据 UpdateModel ...
- Caffe::Snapshot的运行过程
Snapshot的存储 概述 Snapshot的存储格式有两种,分别是BINARYPROTO格式和hdf5格式.BINARYPROTO是一种二进制文件,并且可以通过修改shapshot_format来 ...
- MySQL Cluster 与 MongoDB 复制群集分片设计及原理
分布式数据库计算涉及到分布式事务.数据分布.数据收敛计算等等要求 分布式数据库能实现高安全.高性能.高可用等特征,当然也带来了高成本(固定成本及运营成本),我们通过MongoDB及MySQL Clus ...
- django amdin后台改成中文
- spring-data-elasticsearch使用出现的一些小问题
问题一failed to load elasticsearch nodes : org.elasticsearch.index.mapper.MapperParsingException: No ty ...
- 001/Go语言构建区块链（mooc）
1.区块链发展与现状 视频地址:https://www.imooc.com/video/17452 注意: 比特币与以太坊最大的区别在于: 以太坊引入了对图灵完美智能合约的支持,人们可以将任何业务逻辑 ...