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 相关文章推荐
在html页面上拖放移动标签
Jan 08 Javascript
node.js中的http.createClient方法使用说明
Dec 15 Javascript
js表头排序实现方法
Jan 16 Javascript
微信小程序 动态绑定数据及动态事件处理
Mar 14 Javascript
微信小程序开发之toast等弹框提示使用教程
Jun 08 Javascript
基于vue开发的在线付费课程应用过程
Jan 25 Javascript
JavaScript对象的特性与实践应用深入详解
Dec 30 Javascript
图文讲解vue的v-if使用方法
Feb 11 Javascript
vue中 数字相加为字串转化为数值的例子
Nov 07 Javascript
jQuery实现验证用户登录
Dec 10 jQuery
VueJS实现用户管理系统
May 29 Javascript
vant组件中 dialog的确认按钮的回调事件操作
Nov 04 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下通过伪造http头破解防盗链的代码
2010/07/03 PHP
关于php curl获取301或302转向的网址问题的解决方法
2011/06/02 PHP
PHP字符串比较函数strcmp()和strcasecmp()使用总结
2014/11/19 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
jQuery之选项卡的简单实现
2014/02/28 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
Bootstrap实现水平排列的表单
2016/07/04 Javascript
详谈$.data()的用法和作用
2017/02/13 Javascript
webpack源码之loader机制详解
2018/04/06 Javascript
详解如何从零开始搭建Express+Vue开发环境
2018/07/17 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
2018/08/11 Javascript
laravel-admin 与 vue 结合使用实例代码详解
2019/06/04 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
2020/02/26 Javascript
详解JavaScript之Array.reduce源码解读
2020/11/01 Javascript
jQuery实现手风琴特效
2021/01/11 jQuery
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
[40:03]RNG vs VG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
用Python制作在地图上模拟瘟疫扩散的Gif图
2015/03/31 Python
Python实现更改图片尺寸大小的方法(基于Pillow包)
2016/09/19 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
Python面向对象实现一个对象调用另一个对象操作示例
2019/04/08 Python
用Python配平化学方程式的方法
2019/07/20 Python
深入学习python多线程与GIL
2019/08/26 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
世界各地的当地人的食物体验:Eatwith
2019/07/26 全球购物
大学生实习证明范本
2014/01/15 职场文书
汽车维修工岗位职责
2014/02/12 职场文书
市场专员岗位职责
2014/02/14 职场文书
cf收人广告词
2014/03/14 职场文书
精彩广告词大全
2014/03/19 职场文书
彩色的翅膀教学反思
2014/04/25 职场文书
布达拉宫导游词
2015/02/02 职场文书