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 ...
随机推荐
- Java 内存屏障
内存屏障(Memory Barrier,或有时叫做内存栅栏,Memory Fence)是一种CPU指令,用于控制特定条件下的重排序和内存可见性问题.Java编译器也会根据内存屏障的规则禁止重排序. 内 ...
- R Seurat 单细胞处理pipline 代码
options(stringsAsFactors = F ) rm(list = ls()) library(Seurat) library(dplyr) library(ggplot2) libra ...
- CG-CTF | Hello,RE!
菜狗开始向着pwn与re进军了(●'◡'●)[说白了,还是在水博客吧] 按r出flag: galf leW{ emoc _oT_ W_ER dlro }! 反一下:fla ...
- 鸡肋工具-Oracle建表工具
为什么叫鸡肋工具呢,因为我们完全可以在pl/sql上直接建立表.索引.同义词.授权.触发器等. 写这个工具目的是因为公司的本地.测试环境开发无权创建表,每次成员建表语句千奇百怪不规范,所以写了这么个工 ...
- 深入理解webpack（二） webpack-dev-server基本配置
摘要:webpack-dev-server是一个使用了express的Http服务器,它的作用主要是为了监听资源文件的改变,该http服务器和client使用了websocket通信协议,只要资源文 ...
- KETTLE——（二）数据抽取
过了个春节,好长时间没有更新了,今天接着写第二部分——数据抽取. 进入界面以后会发现左侧菜单有两个东西:转换和作业:简单说一下,转换是单次的转换,不可重复,但可重复利用:作业是汇聚了其他操作和多次(可 ...
- 利用python+tkinter做一个简单的智能电视遥控器
要通过python实现遥控器功能分两步: 第一步:开发图形化界面,以暴风TV的遥控器按钮为例 第二步:使PC端给电视发送相应指令(此步骤需要打开电视的adb开关) 现在就开始第一步操作实现遥控器功能, ...
- SET ANSI_NULLS ON SET QUOTED_IDENTIFIER ON 什么意思 sql server 2005 2008
原文:http://www.cnblogs.com/ForFreeDom/archive/2009/10/16/1584680.html 在sqlserver2005或SQL2008数据库项目中,创建 ...
- 在使用spring中的ContextConfiguration、test注解时出现的错误
错误: 在使用测试注解时出现ContextConfiguration注解和test注解无法正常导包使用的编译异常,如图: 解决办法: 将pom.xml文件中以下依赖管理 中的<scope> ...
- Linux基础：Linux环境下安装JDK
title: Linux基础:JDK的及环境变量配置 author: Enjoyitlife.top date: 2019-10-09 20:50:36 tags: Linux JDK categor ...