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 相关文章推荐
jQuery中fadeOut()方法用法实例
Dec 24 Javascript
JavaScript定时显示广告代码分享
Mar 02 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
Jun 09 Javascript
JavaScript数值千分位格式化的两种简单实现方法
Aug 01 Javascript
Vue.js创建Calendar日历效果
Nov 03 Javascript
DVA框架统一处理所有页面的loading状态
Aug 25 Javascript
vue2.0 实现页面导航提示引导的方法
Mar 13 Javascript
使用webpack打包后的vue项目如何正确运行(express)
Oct 26 Javascript
微信小程序实现留言功能
Oct 31 Javascript
Vue组件之高德地图地址选择功能的实例代码
Jun 21 Javascript
Openlayers实现测量功能
Sep 25 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
Oct 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
PHP模板引擎SMARTY
2006/10/09 PHP
BBS(php &amp; mysql)完整版(五)
2006/10/09 PHP
oracle资料库函式库
2006/10/09 PHP
自己在做项目过程中学到的PHP知识收集
2012/08/20 PHP
str_replace只替换一次字符串的方法
2013/04/09 PHP
php使用number_format函数截取小数的方法分析
2016/05/27 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
Javascript实例教程(19) 使用HoTMetal(2)
2006/12/23 Javascript
juqery 学习之六 CSS--css、位置、宽高
2011/02/11 Javascript
jquery中object对象循环遍历的方法
2015/12/18 Javascript
AngularJS入门教程之ng-checked 指令详解
2016/08/01 Javascript
浅谈js中的三种继承方式及其优缺点
2016/08/10 Javascript
纯JS代码实现隔行变色鼠标移入高亮
2016/11/23 Javascript
JavaScript中Array对象用法实例总结
2016/11/29 Javascript
js图片轮播手动切换特效
2017/01/12 Javascript
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
2017/03/02 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
2018/04/25 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
layui table去掉右侧滑动条的实现方法
2019/09/05 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
2019/11/07 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
2020/06/02 Javascript
javascript实现随机抽奖功能
2020/12/30 Javascript
Python数据结构与算法之图的基本实现及迭代器实例详解
2017/12/12 Python
PyTorch上搭建简单神经网络实现回归和分类的示例
2018/04/28 Python
Python实现的对本地host127.0.0.1主机进行扫描端口功能示例
2019/02/15 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
使用Python实现将多表分批次从数据库导出到Excel
2020/05/15 Python
Python3 ID3决策树判断申请贷款是否成功的实现代码
2020/05/21 Python
CSS3 animation ? steps 函数详解
2019/08/30 HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
2020/03/06 HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
2013/07/04 HTML / CSS
厂长助理岗位职责
2013/12/27 职场文书
城市规划应届生推荐信
2014/09/08 职场文书
群众路线领导干部个人对照检查材料(集锦)
2014/09/23 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书