vue实现表单录入小案例

 更新时间:2019年09月27日 11:06:47   作者:小羽向前跑   我要评论
这篇文章主要为大家详细介绍了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持澳门金沙网上娱乐。

相关文章

  • vue 集成jTopo 处理方法

    vue 集成jTopo 处理方法

    这篇文章主要介绍了vue 集成jTopo 处理方法,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-08-08
  • 详解vue2.0 资源文件assets和static的区别

    详解vue2.0 资源文件assets和static的区别

    这篇文章主要介绍了详解vue2.0 资源文件assets和static的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • Vue.js项目部署到服务器的详细步骤

    Vue.js项目部署到服务器的详细步骤

    这篇文章给大家介绍了Vue.js项目部署到服务器的详细步骤,既然是部署到服务器,肯定是需要一个云的。具体思路步骤大家可以参考下本文
    2017-07-07
  • vue2中filter()的实现代码

    vue2中filter()的实现代码

    vue2.0里,不再有自带的过滤器,需要自己定义过滤器。下面通过实例代码给大家介绍vue2中filter()的相关知识,感兴趣的朋友一起看看吧
    2017-07-07
  • 基于vue.js 2.x的虚拟滚动条的示例代码

    基于vue.js 2.x的虚拟滚动条的示例代码

    本篇文章主要介绍了基于vue.js 2.x的虚拟滚动条的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • 详解vue.js全局组件和局部组件

    详解vue.js全局组件和局部组件

    这篇文章主要介绍了详解vue.js全局组件和局部组件,实例分析了全局组件和局部的技巧,有兴趣的可以了解一下。
    2017-04-04
  • 如何根据业务封装自己的功能组件

    如何根据业务封装自己的功能组件

    这篇文章主要介绍了Vue封装功能组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue项目中应用ueditor自定义上传按钮功能

    vue项目中应用ueditor自定义上传按钮功能

    这篇文章主要介绍了vue项目中应用ueditor自定义上传按钮功能,文中以vue-cli生成的项目为例给大家介绍了vue项目中使用ueditor的方法,感兴趣的朋友跟随澳门金沙网上娱乐小编一起学习吧
    2018-04-04
  • 详解vue的diff算法原理

    详解vue的diff算法原理

    这篇文章主要介绍了详解vue的diff算法原理,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • Vue官方文档梳理之全局配置

    Vue官方文档梳理之全局配置

    这篇文章主要介绍了Vue官方文档梳理之全局配置,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11

最新评论