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 ...
随机推荐
- 【bzoj3162】独钓寒江雪
*题目描述: *题解: 树哈希+组合数学.对于树的形态相同的子树就一起考虑. *代码: #include <cstdio> #include <cstring> #includ ...
- 【PowerOJ1751&网络流24题】数字梯形问题（费用流）
题意: 思路: [问题分析] 求图的最大权不相交路径及其变种,用费用最大流解决. [建模方法] 规则(1) 把梯形中每个位置抽象为两个点<i.a>,<i.b>,建立附加源S汇T ...
- django model 操作总结
使用场景 一对一:在某表中创建一行数据时,有一个单选的下拉框(下拉框中的内容被用过一次就消失了).//两个表的数据一一对应 例如:原有含10列数据的一张表保存相关信息,经过一段时间之后,10列无法满足 ...
- 前端每日实战：156# 视频演示如何用纯 CSS 创作一个飞机舷窗风格的 toggle 控件
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/jeaOrw 可交互视频 此视频是可 ...
- 使用eclipse导入新项目时中文出现乱码问题
有时候在github上看到别人不错的项目想要拉下来学习学习的时候,总会出现这样的情况,实在蛋疼. 一般出现这种问题,会有三个地方需要改动: 在项目上右键选择 properties 将 text fil ...
- 状压dp(8.8上午)
神马是状态压缩? 就是当普通dp的每一维表示的状态非常少的时候,可以压缩成一维来表示 如果m==8 dp[i][0/1][0/1]......[0/1] 压缩一下 dp[i][s]表示到了第i行,状态 ...
- The import org.apache.hadoop.mapreduce cannot be resolved
ubuntu@VM---ubuntu:~$ sudo apt--src.tar.gz Reading package lists... Done Building dependency tree Re ...
- HDFS——完全分布式搭建
架构 NN--namenode SNN--secondnamenode DN--datanode hadoop_env.sh中修改JAVA_HOME core-site.xml <propert ...
- 003-spring-data-elasticsearch 3.0.0.0使用【一】-spring-data之概述、核心概念、查询方法、定义Repository接口
零.概述 Spring Data Elasticsearch项目提供了与Elasticsearch搜索引擎的集成.Spring Data Elasticsearch的关键功能区域是一个POJO中心模型 ...
- python修改文件
文档username.txt 将文件中密码123456改成67890: 方法一:(简单粗暴) 1.打开文件 2.读出数据 3.修改数据 4.清空原来文件,将新的内容写进去 f = open('user ...