vue实现form表单与table表格的数据关联功能示例


Posted in Javascript onJanuary 29, 2019

本文实例讲述了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>3water.com 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实现form表单与table表格的数据关联功能示例

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
JavaScript中的其他对象
Jan 16 Javascript
JScript 脚本实现文件下载 一般用于下载木马
Oct 29 Javascript
js利用数组length属性清空和截短数组的小例子
Jan 15 Javascript
javascript运行机制之this详细介绍
Feb 07 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
Aug 31 Javascript
JavaScript中的this到底是什么(一)
Dec 09 Javascript
用NODE.JS中的流编写工具是要注意的事项
Mar 01 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Feb 17 Javascript
简单实现AngularJS轮播图效果
Apr 10 Javascript
webpack4 css打包压缩问题的解决
May 18 Javascript
基于vue实现移动端圆形旋钮插件效果
Nov 28 Javascript
vue input实现点击按钮文字增删功能示例
Jan 29 #Javascript
详解基于webpack&amp;gettext的前端多语言方案
Jan 29 #Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 #Javascript
vue实现的下拉框功能示例
Jan 29 #Javascript
angular4中引入echarts的方法示例
Jan 29 #Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 #Javascript
微信小程序实现页面浮动导航
Jan 28 #Javascript
You might like
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
php中使用exec,system等函数调用系统命令的方法(不建议使用,可导致安全问题)
2012/09/07 PHP
PHP获取当前页面完整URL的实现代码
2013/06/10 PHP
利用谷歌 Translate API制作自己的翻译脚本
2014/06/04 PHP
PHP中feof()函数实例测试
2014/08/23 PHP
PHP快速排序算法实现的原理及代码详解
2019/04/03 PHP
PHP切割汉字的常用方法实例总结
2019/04/27 PHP
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
了解jQuery技巧来提高你的代码
2010/01/08 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
2013/04/26 Javascript
jquery将一个表单序列化为一个对象的方法
2014/01/03 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
2016/05/28 Javascript
BootStrap实现树形目录组件代码详解
2016/06/21 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
2018/07/19 Javascript
微信小程序 JS动态修改样式的实现方法
2018/12/16 Javascript
Nginx设置为Node.js的前端服务器方法总结
2019/03/27 Javascript
jquery多级树形下拉菜单的实例代码
2019/07/09 jQuery
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
使用django-crontab实现定时任务的示例
2018/02/26 Python
python实现词法分析器
2019/01/31 Python
浅谈PyQt5 的帮助文档查找方法,可以查看每个类的方法
2019/06/25 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
python自动点赞功能的实现思路
2020/02/26 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
Python turtle库的画笔控制说明
2020/06/28 Python
python爬取youtube视频的示例代码
2021/03/03 Python
Tirendo比利时:在线购买轮胎
2018/10/22 全球购物
英国天然宝石首饰购买网站:Gemondo Jewellery
2018/10/23 全球购物
马丁路德金演讲稿
2014/05/19 职场文书
公司经理任命书
2014/06/05 职场文书
学校运动会广播稿100条
2014/09/14 职场文书
2014预备党员批评与自我批评思想汇报
2014/09/20 职场文书
解决Go gorm踩过的坑
2021/04/30 Golang