vue实现学生录入系统之添加删除功能
更新时间：2018年07月11日 10:42:12 作者：夏木炎
本文给大家带来一个小案例基于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实现echarts中的仪表盘，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
Vue是一种流行的JavaScript框架,可以帮助开发者建立高效的Web应用程序,本文将为您介绍如何在Vue中实现登录验证功能,并为您提供具体的代码示例,感兴趣的朋友一起看看吧2023-11-11
面包屑导航栏是一种用户界面组件,用于展示用户在网站或应用中的路径,它包括了从主页到当前页面的链接序列,有助于用户快速了解和导航至上级页面,本文就来介绍一下Element-UI组件实现面包屑导航栏的示例代码,感兴趣的可以了解一下2024-09-09
这篇文章主要介绍了vuejs动态组件给子组件传递数据的方法详解的相关资料,需要的朋友可以参考下2016-09-09
在现代的Web应用中,用户体验至关重要,而提供简单易用的复制功能是改善用户体验的一项关键功能,本文将为大家详细介绍Vue实现一键复制功能的具体方法,需要的可以参考下2023-11-11
这篇文章主要介绍了Vue 动态添加路由及生成菜单的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
最近有项目需要用到对图片进行局部放大,类似淘宝商品页的放大镜效果,经过一番研究功能可用,下面这篇文章主要给大家介绍了关于如何利用vue3实现放大镜效果的相关资料,需要的朋友可以参考下2021-09-09
最近在写vue的一个项目要实现过渡的效果,虽然vue动画不是强项,库也多,但是基本的坑还是得踩扎实,下面这篇文章主要给大家介绍了关于Vue中实现过渡动画效果的相关资料,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了Vue axios 跨域请求无法带上cookie的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
vue3 elementPlus 表格实现行列拖拽及列检索功能(完整代码)
本文通过实例代码给大家介绍vue3 elementPlus 表格实现行列拖拽及列检索功能,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-10-10
最新评论