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 相关文章推荐
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
Aug 28 Javascript
jquery 元素相对定位代码
Oct 15 Javascript
jQuery 数据缓存模块进化史详细介绍
Nov 19 Javascript
jquery按回车提交数据的代码示例
Nov 05 Javascript
Android中的jQuery:AQuery简介
May 06 Javascript
JavaScript编程中布尔对象的基本使用
Oct 25 Javascript
AngularJS 视图详解及示例代码
Aug 17 Javascript
Angular中使用$watch监听object属性值的变化(详解)
Apr 24 Javascript
iframe与主框架跨域相互访问实现方法
Sep 14 Javascript
开发Vue树形组件的示例代码
Dec 21 Javascript
axios 处理 302 状态码的解决方法
Apr 10 Javascript
vue中锚点的三种方法
Jul 06 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
在任意字符集下正常显示网页的方法二(续)
2007/04/01 PHP
PHP中实现crontab代码分享
2015/03/26 PHP
javascript的事件描述
2006/09/08 Javascript
jquery 操作日期、星期、元素的追加的实现代码
2012/02/07 Javascript
在新窗口打开超链接的方法小结
2013/04/14 Javascript
使用jQuery实现更改默认alert框体
2015/04/13 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
Backbone View 之间通信的三种方式
2016/08/09 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
2017/07/10 Javascript
js 毫秒转天时分秒的实例
2017/11/17 Javascript
windows系统下更新nodejs版本的方案
2017/11/24 NodeJs
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
2019/04/28 Javascript
微信小程序搭建自己的Https服务器
2019/05/02 Javascript
layui表格 列自动适应大小失效的解决方法
2019/09/06 Javascript
JS删除数组指定值常用方法详解
2020/06/04 Javascript
js实现炫酷光感效果
2020/09/05 Javascript
python使用marshal模块序列化实例
2014/09/25 Python
用Python遍历C盘dll文件的方法
2015/05/06 Python
Python 获取当前所在目录的方法详解
2017/08/02 Python
virtualenv 指定 python 解释器的版本方法
2018/10/25 Python
python使用pip安装模块出现ReadTimeoutError: HTTPSConnectionPool的解决方法
2019/10/04 Python
关于Numpy数据类型对象(dtype)使用详解
2019/11/27 Python
银行服务感言
2014/03/01 职场文书
主题党日活动总结
2014/07/08 职场文书
党员学习正风肃纪思想汇报
2014/09/12 职场文书
办公用房租赁协议书
2014/11/29 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
2016年“6.26”禁毒宣传月系列活动总结
2016/04/05 职场文书
Python 如何安装Selenium
2021/05/06 Python
如何判断pytorch是否支持GPU加速
2021/06/01 Python
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js
vmware虚拟机打不开vmx文件怎么办 ?vmware虚拟机vmx文件打开方法
2022/04/08 数码科技
MySQL数据库简介与基本操作
2022/05/30 MySQL