vue实现学生信息管理系统
更新时间：2020年05月30日 10:47:14 作者：_冷月心
这篇文章主要为大家详细介绍了vue实现学生信息管理系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现学生信息管理系统的具体代码，供大家参考，具体内容如下
界面
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue--学生信息管理系统</title>
<!-- 引包 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
.title{margin:20px;font-weight: bold;font-size: 20px;}
</style>
</head>
<body>
<div id="app">
<!-- 通过：style设置样式 -->
<table :style="[render_table]">
<!-- 通过：class设置样式 -->
<caption :class="['title']">学生信息管理系统</caption>
<tr>
<td>学号</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</tr>
<!-- 遍历数据 -->
<tr v-for="(stu,i) in list">
<td><input type="text" v-model="stu.no"></td>
<td><input type="text" v-model="stu.name"></td>
<td><input type="text" v-model="stu.age"></td>
<!-- 绑定点击事件并传参 -->
<td><input type="button" value="删除" @click="del(i)"></td>
</tr>
</table>
<!-- 添加数据的表单 -->
<div :style="[render_form]">
<input type="search" v-model="no" placeholder="学号"><br>
<input type="search" v-model="name" placeholder="姓名"><br>
<input type="search" v-model="age" placeholder="年龄"><br>
<input type="button" value="添加" @click="add">
</div>
<!-- 用来显示双向数据绑定后的编辑效果,数据驱动视图 -->
<div>
<h2>全部数据</h2>
<ul v-for="(stu,i) in list">
<!--用三种方式获取数据 -->
<li>{{stu.no}}</li>
<li v-text="stu.name"></li>
<li v-html="stu.age"></li>
</ul>
</div>
</div>
<script>
//创建一个Vue的实例
var vm = new Vue({
el: "#app", //获取根节点
data: {
no:"",
name:"",
age:"",
list:[
{
no:"001",
name:"TOM",
age:18,
},{
no:"002",
name:"Juy",
age:19,
},
{ no:"003",
name:"Mlo",
age:20,
}
],
//设置样式
render_table:{"width":"700px","text-align":"center"},
render_form:{"width":"300px","text-align":"center","margin-top":"50px"}
},
methods:{
// 添加方法
add(){
this.list.push({no:this.no,name:this.name,age:this.age});
this.no="";this.name="";this.age="";
},
//删除方法
del(i){
if(confirm("确定删除吗？")){
this.list.splice(i,1);
}
}
}
})
</script>
</body>
</html>
知识点
- 双向数据绑定
- 文本插值
- 事件绑定
- 方法定义
- 数据遍历
- 样式设置
更多文章可以点击《Vue.js前端组件学习教程》学习阅读。
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
更多vue学习教程请阅读专题《vue实战教程》
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue.js最佳实践,本文主要面向对象是有一定vue.js 编辑经验的开发者，需要的朋友可以参考下2018-05-05
这篇文章主要介绍了vue如何进行数据代理,通过本文学习我们了解如何代理的及验证两条线的问题，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-10-10
Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint UI，下面这篇文章主要给大家介绍了关于利用vue + element-ui如何实现简洁的导入导出功能的相关资料，需要的朋友可以参考下。2017-12-12
本文主要介绍了vue-socket.io使用教程与踩坑记录，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
本篇文章主要介绍了Vue-Router进阶之滚动行为详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了vue里的axios如何获取本地json数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
下面小编就为大家分享一篇基于vue-cli 打包时抽离项目相关配置文件详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
在现代Web应用中，PDF文档的使用非常普遍，因为它可以在各种设备和操作系统上保持一致的外观和格式，本文我们就来探讨一下如何在Vue.js应用中使用vue-pdf库嵌入PDF文档吧2023-08-08
组件（Component）是Vue.js最强大的功能之一,组件可以扩展 HTML 元素,封装可重用的代码,这篇文章主要给大家介绍了关于VUE3学习教程之全局组件和局部组件的相关资料,需要的朋友可以参考下2022-01-01
这篇文章主要给大家介绍了关于Vue自定义加水波纹效果指令的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-02-02
最新评论