vue实现表单录入小案例


Posted in Javascript onSeptember 27, 2019

本文实例为大家分享了vue实现表单录入的具体代码,供大家参考,具体内容如下

最终效果:

vue实现表单录入小案例

代码:

<template>
 <div id="app">
 <!--第一部分-->
 <fieldset>
  <legend>学生录入系统</legend>
  <div>
  <span>姓名:</span>
  <input type="text" placeholder="请输入姓名" v-model="newStudent.name">
  </div>
  <div>
  <span>年龄:</span>
  <input type="text" placeholder="请输入年龄" v-model="newStudent.age">
  </div>
  <div>
  <span>性别:</span>
  <select v-model="newStudent.sex">
   <option value="男">男</option>
   <option value="女">女</option>
  </select>
  </div>
  <div>
  <span>手机:</span>
  <input type="text" placeholder="请输入手机号码" v-model="newStudent.phone">
  </div>
  <button @click="createNewStudent()">创建新用户</button>
 </fieldset>
 <!--第二部分-->
 <table>
  <thead>
  <tr>
  <td>姓名</td>
  <td>性别</td>
  <td>年龄</td>
  <td>手机</td>
  <td>删除</td>
  </tr>
  </thead>
  <tbody>
  <tr v-for="(p, index) in persons">
  <td>{{p.name}}</td>
  <td>{{p.sex}}</td>
  <td>{{p.age}}</td>
  <td>{{p.phone}}</td>
  <td>
   <button @click="deleteStudentMsg(index)">删除</button>
  </td>
  </tr>
  </tbody>
 </table>
 </div>
</template>
 
<script>
 export default {
  name: "todolist2",
  data(){
   return{
   persons: [
    {name: '张三', age: 20, sex: '男', phone: '18932323232'},
    {name: '李四', age: 30, sex: '男', phone: '18921212122'},
    {name: '王五', age: 20, sex: '男', phone: '18932223232'},
    {name: '赵六', age: 25, sex: '女', phone: '18932322232'},
   ],
   newStudent: {name: '', age: 0, sex: '男', phone: ''}
   }
  },
  methods: {
  // 创建一条新纪录
  createNewStudent(){
   // 姓名不能为空
   if(this.newStudent.name === ''){
   alert('姓名不能为空');
   return;
   }
 
   // 年龄不能小于0
   if(this.newStudent.age <= 0){
   alert('请输入正确的年龄');
   return;
   }
 
   // 手机号码
   if(this.newStudent.phone === ''){
   alert('手机号码不正确');
   return;
   }
 
   // 往数组中添加一条新纪录
   this.persons.unshift(this.newStudent);
   // 清空数据
   this.newStudent = {name: '', age: 0, sex: '男', phone: ''}
  },
 
  // 删除一条学生纪录
  deleteStudentMsg(index){
   this.persons.splice(index,1);
  }
  },
 }
</script>
 
<style scoped>
 #app{
 margin: 50px auto;
 width: 600px;
 }
 
 fieldset{
 border: 1px solid orangered;
 margin-bottom: 20px;
 }
 
 fieldset input{
 width: 200px;
 height: 30px;
 margin: 10px 0;
 }
 
 table{
 width: 600px;
 border: 2px solid orangered;
 text-align: center;
 }
 
 thead{
 background-color: orangered;
 }
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
类似GMAIL的Ajax信息反馈显示
Feb 16 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
Apr 21 Javascript
JS实现动态给图片添加边框的方法
Apr 01 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
Sep 08 Javascript
原生js实现放大镜
Feb 20 Javascript
React学习笔记之事件处理(二)
Jul 02 Javascript
ReactNative实现Toast的示例
Dec 31 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
Jan 31 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
Apr 08 Javascript
Emberjs 通过 axios 下载文件的方法
Sep 03 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
Aug 07 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
Sep 27 #Javascript
layui form.render('select', 'test2') 更新渲染的方法
Sep 27 #Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 #jQuery
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
Sep 27 #Javascript
vue实现表格过滤功能
Sep 27 #Javascript
vue实现手机端省市区区域选择
Sep 27 #Javascript
使用layui的layer组件做弹出层的例子
Sep 27 #Javascript
You might like
php 团购折扣计算公式
2011/11/24 PHP
ecshop 批量上传(加入自定义属性)
2012/03/20 PHP
PHP系列学习之日期函数使用介绍
2012/08/18 PHP
解析php中获取url与物理路径的总结
2013/06/21 PHP
php通过前序遍历树实现无需递归的无限极分类
2015/07/10 PHP
微信封装的调用微信签名包的类库
2017/06/08 PHP
JavaScript使用技巧精萃[代码非常实用]
2008/11/21 Javascript
JavaScript基础知识之数据类型
2012/08/06 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
2015/11/09 Javascript
深入理解关于javascript中apply()和call()方法的区别
2016/04/12 Javascript
详解使用React全家桶搭建一个后台管理系统
2017/11/04 Javascript
原生js调用json方法总结
2018/02/22 Javascript
Vue 实现双向绑定的四种方法
2018/03/16 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
vue-cli3 从搭建到优化的详细步骤
2019/01/20 Javascript
微信小程序使用echarts获取数据并生成折线图
2019/10/16 Javascript
javascript利用canvas实现鼠标拖拽功能
2020/07/23 Javascript
查找Vue中下标的操作(some和findindex)
2020/08/12 Javascript
[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场
2018/04/05 DOTA
对numpy中数组元素的统一赋值实例
2018/04/04 Python
python使用pygame模块实现坦克大战游戏
2020/03/25 Python
python实现大量图片重命名
2020/03/23 Python
为什么黑客都用python(123个黑客必备的Python工具)
2020/01/31 Python
Win10用vscode打开anaconda环境中的python出错问题的解决
2020/05/25 Python
python3实现名片管理系统(控制台版)
2020/11/29 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
收藏!10个免费高清视频素材网站!【设计、视频剪辑必备】
2021/03/18 杂记
HTML5使用Audio标签实现歌词同步的效果
2016/03/17 HTML / CSS
小学生评语大全
2014/04/18 职场文书
访谈节目策划方案
2014/05/15 职场文书
预备党员综合考察材料
2014/05/31 职场文书
协会周年庆活动方案
2014/08/26 职场文书
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
党风廉政教育心得体会2016
2016/01/22 职场文书
表扬稿表扬信的格式及范文
2019/06/24 职场文书