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 相关文章推荐
JS.getTextContent(element,preformatted)使用介绍
Sep 21 Javascript
javascript设置金额样式转换保留两位小数示例代码
Dec 04 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
Aug 18 Javascript
BOM系列第二篇之定时器requestAnimationFrame
Aug 17 Javascript
关于angularJs指令的Scope(作用域)介绍
Oct 25 Javascript
js实现炫酷的左右轮播图
Jan 18 Javascript
jquery插件ContextMenu设置右键菜单
Mar 13 Javascript
js实现拖拽上传图片功能
Aug 01 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
Aug 03 Javascript
node.js-v6新版安装具体步骤(分享)
Sep 06 Javascript
JS对象和字符串之间互换操作实例分析
Feb 02 Javascript
JS数组reduce()方法原理及使用技巧解析
Jul 14 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
一个用php实现的获取URL信息的类
2007/01/02 PHP
php获取twitter最新消息的方法
2015/04/14 PHP
Symfony2实现从数据库获取数据的方法小结
2016/03/18 PHP
PHP实现的简单留言板功能示例【基于thinkPHP框架】
2018/12/07 PHP
YII框架模块化处理操作示例
2019/04/26 PHP
JS操作iframe里的dom(实例讲解)
2014/01/29 Javascript
BootStrap实用代码片段之一
2016/03/22 Javascript
详解JavaScript节流函数中的Throttle
2016/07/16 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
JavaScript每天必学之基础知识
2016/09/17 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
2016/11/25 Javascript
JS常用加密编码与算法实例总结
2016/12/22 Javascript
js实现字符全排列算法的简单方法
2017/05/01 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
2019/02/15 Javascript
JavaScript遍历数组和对象的元素简单操作示例
2019/07/09 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
2019/09/04 Javascript
原生微信小程序开发中 redux 的使用详解
2021/02/18 Javascript
在Python中使用NLTK库实现对词干的提取的教程
2015/04/08 Python
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
用Python读取几十万行文本数据
2018/12/24 Python
Python实现九宫格式的朋友圈功能内附“马云”朋友圈
2019/05/07 Python
解决py2exe打包后,总是多显示一个DOS黑色窗口的问题
2019/06/21 Python
python3爬取torrent种子链接实例
2020/01/16 Python
Python爬虫JSON及JSONPath运行原理详解
2020/06/04 Python
欧洲领先的技术商店:eibmarkt.com
2019/05/10 全球购物
Weblogic和WebSphere不同特点
2012/05/09 面试题
物流司机岗位职责
2013/12/28 职场文书
士力架广告词
2014/03/20 职场文书
高中生班主任评语
2014/04/25 职场文书
一份没有按时交货失信于客户的检讨书
2014/09/19 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
活动总结书怎么写
2015/05/11 职场文书
出生证明格式
2015/06/15 职场文书
学籍证明模板
2015/06/18 职场文书
关于童年的读书笔记
2015/06/26 职场文书
导游词之丽江普济寺
2019/10/22 职场文书