vue实现学生录入系统之添加删除功能
一.案例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue指令综合案例</title>
<style>
#app{
margin: 50px auto;
width: 620px;
}
fieldset{
border: 2px solid plum;
margin-bottom: 20px;
}
fieldset input{
width: 200px;
height: 30px;
margin: 10px 0;
}
table{
width: 620px;
border: 2px solid plum;
text-align: center;
}
thead{
background-color: plum;
}
</style>
</head>
<body>
<div id="app">
<fieldset>
<legend>学生录入系统</legend>
<div>
<span>姓名：</span>
<input type="text" placeholder="请输入姓名" v-model="student.name"/>
<span></span>
</div>
<div>
<span>年龄：</span>
<input type="text" placeholder="请输入年龄" v-model="student.age"/>
</div>
<div>
<span>性别：</span>
<select v-model="student.sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<div>
<span>QQ：</span>
<input type="text" placeholder="请输入QQ" v-model="student.QQ"/>
</div>
<button @click="createNewStudent()">创建新用户</button>
</fieldset>
<table>
<thead>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>QQ</td>
<td>删除</td>
</tr>
</thead>
<tbody>
<tr v-for="(p,index) in persons">
<td>{{p.name}}</td>
<td>{{p.age}}</td>
<td>{{p.sex}}</td>
<td>{{p.QQ}}</td>
<td><button @click="deleteStudentMsg(index)">删除</button></td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/vue.js" ></script>
<script>
//1.创建Vue的实例
let vm=new Vue({
el:'#app',
data:{
persons:[
{name:'张三',age:16,sex:'男',QQ:'123456'},
{name:'李四',age:17,sex:'男',QQ:'100000'},
{name:'王麻子',age:18,sex:'女',QQ:'666666'},
{name:'赵六',age:19,sex:'男',QQ:'888888'},
{name:'刘七',age:20,sex:'女',QQ:'999999'}
],
student:{name:'',age:0,sex:'男',QQ:''}
},
methods:{
//创建一条新记录
createNewStudent(){
//姓名不能为空
if(this.student.name==''){
alert('姓名不能为空');
return;
}
//年龄不能小于0
if(this.student.age<0){
alert('请输入正确年龄');
return;
}
//QQ
if(this.student.age==''){
alert('请输入正确年龄');
return;
}
//往数组中添加一条新记录
this.persons.unshift(this.student);
//清空数据
this.student={name:'',age:0,sex:'男',QQ:''};
},
//删除
deleteStudentMsg(index){
this.persons.splice(index,1);
}
}
});
</script>
</body>
</html>
二.结果
总结
以上所述是小编给大家介绍的vue实现学生录入系统之添加删除功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
详解vue添加删除元素的方法
相关版实例代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue实例:添加删除元素r</title> <style type="text/css"> .form-group{ margin:10px; } .form-group>label{ displa
-
vue.js实现点击后动态添加class及删除同级class的实现代码
最近使用vue需要实现一个点餐选择商品规格的页面,需要通过vue动态的给被点击的元素添加class名字,使其变色,其他的删除class.如图: 开始在网上找了许多办法发现不是太好用,最后找到一个发现还是不错的,记录一下 html: <div class="weui-mask" id="guige"> <div class="guigeBox"> <p class="guigeTitle">{
-
Vue.js动态添加、删除选题的实例代码
大家先看看页面效果吧,当当当当``````````````````````` 图中第二个选题是小颖点击了"新增选题"按钮,然后出来的,当你点击了"删除选项"或"删除选题"按钮,就会删除相应的选项和选题. html代码 <template> <div class="main-container"> <div class="form-horizontal"> <temp
-
在Vue组件上动态添加和删除属性方法
如下所示: 在组件上添加属性 this.$set(this.data,"obj",value'); 删除属性this.$delete(this.data,"obj",value'); 以上这篇在Vue组件上动态添加和删除属性方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue.js动态添加.删除选题的实例代码 详解Vue 动态添加模板的几种方法
-
使用Bootstrap + Vue.js实现添加删除数据示例
界面首先需要引入bootstrap的css和bootstrap的js文件,还有vue.js和jQuery.js才可以看见效果. 这里提供bootstrap的在线文件给大家引用: <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="
-
详解Vue2 无限级分类(添加,删除,修改)
本人对vue不是很懂,搜索了很多关于Vue2 无限级分类介绍,下面我来记录一下,有需要了解Vue2 无限级分类的朋友可参考.希望此文章对各位有所帮助. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue 树</title> <script src="https://unpkg.com/
-
vue实现学生录入系统之添加删除功能
一.案例代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue指令综合案例</title> <style> #app{ margin: 50px auto; width: 620px; } fieldset{ border: 2px solid plum; margin-bottom: 20px; } fieldset inp
-
vue实现在线学生录入系统
最近一直在学Vue,这次做了一个简单的在线学生信息录入系统来巩固一下所学知识. 因为主要是巩固Vue的知识,所以数据也没放数据库,也没用JavaBean或者Servlet,直接写死到表单里了. 具体页面是这样的: 先罗列一下其中用到的Vue的知识点: ①v-for指令的使用 ②v-model指令的使用 ③v-on/@click指令的使用 再提一下可能会用到的知识点: ①JavaScript中对数组头添元素的unshift()方法 ②JavaScript中对数组删除元素的splice()删除方法
-
vue常用指令实现学生录入系统的实战
一.功能描述: 1,对于输入的内容进行简单的判断. 2,实现简单的增加和删除功能. 二.运行情况 图1 页面初始化情况 点击"添加新用户"如下: 图2: 添加一个新用户 图3:删除Anna和张三两个用户 全部代码如下所示:(直接复制到一个.html文件即可成功运行) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <
-
vue与bootstrap实现简单用户信息添加删除功能
本文实例为大家分享了vue与bootstrap实现用户信息添加删除操作的具体代码,供大家参考,具体内容如下 小记: 1.v-model="" 用于input表单双向数据绑定 逻辑层跟渲染层双向绑定 2.v-on:click='add()' click方法绑定 3.v-for='(item,index) in myData' 遍历数组 {{index}} {{item.name}} {{item.age}} 适用于vue版本2.0 4.v-f
-
springboot vue接口测试前后端树节点编辑删除功能
目录 基于springboot+vue 的测试平台开发 一.编辑功能 1. 编辑页外显 2. 实现后端接口 3. 前后联调 4. 测试 二.删除功能 1. 后端接口 2. 前端实现 3. 测试 基于springboot+vue 的测试平台开发 继续更新. 一.编辑功能 1. 编辑页外显 点击树节点的编辑按钮,打开对话框,展示原有的节点名称. 本来树形控件里没有自带的编辑操作,我直接加了一个按钮在上面,绑定点击事件调用edit(data)方法. 为了确认 data 可用,我在edit方法中打印了一
-
java实现学生成绩录入系统
本文为大家分享了java实现学生成绩录入系统,供大家参考,具体内容如下 1.学生类,包括学生的姓名和各科成绩 public class Score { public String name; public double EnglishGrade, MathGrade,phyicalGrade, chemicalGrade,biologicalGrade; Score() { } public Score(String name,double EnglishGrade, double MathGr
-
vue实现商品列表的添加删除实例讲解
我们首先来看下代码: <div id="app"> <div class="container"><form class="form-inline"> <div class="form-group"><label for="exampleInputName2">ID:</label> <input id="example
-
vue实现本地存储添加删除修改功能
本文实例为大家分享了vue实现本地存储添加删除修改的具体代码,供大家参考,具体内容如下 实现功能: 输入的内容添加到正在进行列表中, 双击修改功能, 点击esc键,取消,还是之前的内容, 点击回车,修改成功, 修改框失焦时修改成功, 选中按钮时进入已完成列表,未选中时在正在进行中列表, 点击删除进行删除当行, 本地存储下次打开上次添加的还在 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&
-
python实现简单成绩录入系统
学了一个多月的python,做了一个小程序:python实现简单成绩录入系统,实验一下 menu部分 from tkinter import*#这是一个python模块,python3中都有 import tkinter.messagebox#这也是一个模块 from file_read import read from file_write import write class student_main():#定义一个学生类 def __init__(self): self.name =''