vue实现form表单与table表格的数据关联功能示例
本文实例讲述了vue实现form表单与table表格的数据关联功能。分享给大家供大家参考，具体如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>www.jb51.net vue form表单数据关联</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
input{
margin-left: 50px ;
}
span{
margin-left: 50px ;
}
select{
margin-left: 50px ;
}
.create{
margin-left: 150px ;
}
</style>
</head>
<body>
<form id="app">
<fieldset>
<legend>Creat New Person</legend>
<span>Name:</span><input type="text" v-model="text0">
<br>
<span>Age:</span><input type="text" value="0" v-model="text1">
<br>
<span>Sex:</span><select v-model="text2">
<option>Man</option>
<option>Woman</option>
<option>....</option>
</select>
<br>
<button class="create" @click="add">Create</button>
</fieldset>
<table>
<tr><td>Name</td><td>Age</td><td>Sex</td><td>Delete</td></tr>
<tr v-for="x in person"><td>{{x.name}}</td><td>{{x.age}}</td><td>{{x.sex}}</td><td><button @click="fun">Delete</button></td></tr>
</table>
</form>
</body>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script>
const app=new Vue({
el:"#app",
data:{
text0:"",
text1:"",
text2:"",
person:[{
name:"Jack",
age:"20",
sex:"man",
},
{
name:"Bill",
age:"24",
sex:"woman",
},
]
},
methods: {
add(){
if (this.text0==""||this.text1==""){
alert("Name Or Age undefined")
}else{
this.person.push({
name: this.text0,
age: this.text1,
sex: this.text2,
});
}
},
fun(){
this.person.pop()
}
}
})
</script>
</html>
运行效果如下图所示：
希望本文所述对大家vue.js程序设计有所帮助。
相关推荐
-
Vue axios 中提交表单数据(含上传文件)
我们经常使用表单来上传数据,以及上传文件,那么怎么在表单提交成功的时候接受服务器的响应,并作出相应操作. 当然使用一般jQuery上传对象的格式也是可以的,如果使用传统的表单上传呢? <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport
-
Vue axios 将传递的json数据转为form data的例子
修改main.js文件中axios的配置: 在发送请求前将数据用qs模块转化 修改请求头的Content-Type='application/x-www-form-urlencoded' 具体配置如下: import axios from 'axios' import qs from 'qs' // 添加请求拦截器 axios.interceptors.request.use(function (config) { if(config.method!='get'){ config.data=qs
-
详解vue axios用post提交的数据格式
vue框架推荐使用axios来发送ajax请求,之前我还写过一篇博客来讲解如何在vue组件中使用axios.但之前做着玩用的都是get请求,现在我自己搭博客时使用了post方法,结果发现后台(node.js)完全拿不到前台传来的参数.后来进过一番探索,终于发现问题所在. post提交数据的四种编码方式 1.application/x-www-form-urlencoded 这应该是最常见的post编码方式,一般的表单提交默认以此方式提交.大部分服务器语言对这种方式都有很好的支持.在PHP中,可以
-
Vue 实现把表单form数据 转化成json格式的数据
目的:Vue 中 把表单form数据 转化成json格式的数据 第一步:创建一个数据集(就是你表单需要的数据) 如果你表单都是一些正常的数据,比如 text 什么的.你定义好数据集,就去用 v-model 绑定数据.这样就可以实现数据同步了. 数据集 v-model绑定 如果你的数据不全是这种可以用 v-model 绑定的数据,比如我这个里面需要获取一个 img 的 src 的值.那么下面就需要你想办法把数据给绑定上去了 第二步:转化json 上面第一步,我们已经通过 自动 + 手动 的方式把我
-
vue自定义表单生成器form-create使用详解
介绍 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue 组件.结合内置17种常用表单组件和自定义组件,再复杂的表单都可以轻松搞定. 文档| github 演示项目: 开源的高品质微信商城 功能 自定义组件 可生成任何Vue组件 自带数据验证 轻松转换为表单组件 通过 JSON 生成表单 通过 Maker 生成表单 强大的API,可快速操作表单 双向数据绑定 事件扩展 局部更新 数据验证 栅格布局 内置组件17种常用
-
vue实现form表单与table表格的数据关联功能示例
本文实例讲述了vue实现form表单与table表格的数据关联功能.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-sc
-
vue+elementUI实现表单和图片上传及验证功能示例
本文实例讲述了vue+elementUI实现表单和图片上传及验证功能.分享给大家供大家参考,具体如下: 最终实现需求如下图: form表单内容与重点人员图片同时上传且图片为必填项 分析弹框页需要解决的问题有: 1.表单内容的验证及必填项 2.新增和编辑用同一个组件如何处理数据 3.图片需要和信息一起传递(即不允许自动上传) 4.图片必填的验证问题 针对上述问题作出方案: 1.el-form的表单验证需要注意几个地方: a:el-form-item的prop值需要和表单标签的v-model值保持一
-
vue获取form表单的值示例
这里使用的是Element-ui组件 html: <el-input placeholder="请输入手机号" id="phone" prop="phone" v-model="phone" clearable></el-input> JS: var phone = this.phone; var password = this.password; var that = this; var phone
-
vue 解决form表单提交但不跳转页面的问题
vue使用@submit.prevent=""来设置提交时执行的函数,并阻止页面跳转: <form id="msgForm" action="" method="post" @submit.prevent="sub"> sub函数写在methods内: methods:{ $.post('http://api.test.ai/visitorinfo/', $('#msgForm').serial
-
ant design vue的form表单取值方法
目录 ant design vue的form表单取值 官方中有以下两种取值方式 ant design of vue 学习之表单form v-decorator(表单验证,内置绑定,初始值) 数据获取与填充 表单实例 ant design vue的form表单取值 官方中有以下两种取值方式 因为不是很熟悉,所以还是查了文档找了一下使用方式,刚开始查到的文档是这样写的 然后返回了undefined,后来又查询了一些文档,发现我多加了一个props属性,然后使用第二个方法成功了,代码如下: ant d
-
vue elementui form表单验证的实现
最近我们公司将前端框架由easyui 改为 vue+elementui .自学vue两周 就开始了爬坑之路.业余时间给大家分享一下心得,技术新手加上第一次分享(小激动),有什么不足的地方欢迎大家指正,多多交流才能共同进步! 1.问题 我们公司的项目比较大 表格 表单的页面都不胜数 ,基于此封装了一些 可复用的代码. 2.分析 vue给了我们不一样的前端代码体验 element ui 给我们一套功能强大的组件 减少了我们大量的开发时间 .双剑合璧 天下无敌! 但每个公司的代码风格不同 用户
-
jquery form表单获取内容以及绑定数据
在日常开发的过程中,难免会用到form表单,我们需要获取表单的数据保存到数据库,或者拿到后台的一串json数据,要将数据绑定到form表单上,这里我写了一个基于jquery的,formHelp插件,使用起来也很简单: 获取表单的数据:$("#formid").serializeJson(); 绑定数据到表单:$("#formid").setForm(json); jquery.formHelp.js插件 /** * 将form里面的内容序列化成json * 相同的c
-
jquery序列化form表单使用ajax提交后处理返回的json数据
1.返回json字符串: 复制代码 代码如下: /** 将一个字符串输出到浏览器 */ protected void writeJson(String json) { PrintWriter pw = null; try { servletResponse.setContentType("text/plain;charset=UTF-8"); pw = servletResponse.getWrit
-
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
本文实例讲述了微信小程序学习笔记之表单提交与PHP后台数据交互处理.分享给大家供大家参考,具体如下: 前面一篇结介绍了微信小程序函数定义.页面渲染.这里介绍form表单提交与后台php数据交互处理. [form表单提交] form.wxml: <form bindsubmit="formSubmit" bindreset="formReset"> <view> 昵称:<input type="text" name=&
-
vue+element创建动态的form表单及动态生成表格的行和列
动态创建form表单,网上有插件 (form-create) 不过我不知道它怎么用,没有使用成功,如果你使用成功了,欢迎下方留言. 最后我使用了笨方法,针对各个表单写好通用的组件,然后根据type用v-if来渲染对应的表单,数据,事件什么的都可以动态的传进去,比较好用 <el-form size="mini" class="lj-form lj-form-s1"> <div v-for="(item,i) in table.custome