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项目安装依赖时报错的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了快速理解Vue路由导航守卫，“导航”表示路由正在发生变化，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程 中：全局的, 单个路由独享的, 或者组件级的，下面来快速来接具体内容吧2021-12-12
这篇文章主要介绍了Vue3 全局使用按钮截流指令示例代码,Vue2与Vue3中的自定义指令实现方式略有不同，但实现的按钮截流功能是类似的，本文通过示例代码给大家介绍的非常详细，需要的朋友可以参考下2023-05-05
这篇文章主要为大家详细介绍了如何利用vue3实现6位的密码输入框效果,文中的示例代码简洁易懂,感兴趣的小伙伴可以跟随小编一起学习一下2023-08-08
这篇文章主要介绍了vue项目实例中用query传参如何实现跳转效果，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要为大家详细介绍了Vue如何使用$attrs实现爷爷直接向孙组件传递数据,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下2024-02-02
这篇文章主要介绍了vue如何解决watch和methods值执行顺序问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要为大家详细介绍了Vue实现步骤条效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了vue实现table表格里面数组多层嵌套取值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
vuecli+AXdownload下载组件封装 +css3下载悬浮球动画效果
当触发下载功能的时候,会触发一个下载动画,下载悬浮球会自动弹出,并且闪烁提示有新的下载任务直到下载任务完场提示,接下来通过本文介绍vuecli+AXdownload下载组件封装 +css3下载悬浮球动画效果,需要的朋友可以参考下2024-05-05
最新评论