vue实现学生信息管理系统


Posted in Javascript onMay 30, 2020

本文实例为大家分享了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实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS解密入门之凭直觉解
Jun 25 Javascript
javascript 鼠标拖动图标技术
Feb 07 Javascript
Javascript中的delete介绍
Sep 02 Javascript
jquery 循环显示div的示例代码
Oct 18 Javascript
IE6下拉框图层问题探讨及解决
Jan 03 Javascript
javascript实现行拖动的方法
May 27 Javascript
使用AngularJS来实现HTML页面嵌套的方法
Jun 17 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
Nov 04 Javascript
js利用正则表达式检验输入内容是否为网址
Jul 05 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
Sep 24 Javascript
JavaScript获取页面元素的常用方法详解
Sep 28 Javascript
vue cli3 配置proxy代理无效的解决
Oct 30 Javascript
vue实现在线学生录入系统
May 30 #Javascript
VueJS实现用户管理系统
May 29 #Javascript
如何在vue中使用jointjs过程解析
May 29 #Javascript
vue实现信息管理系统
May 30 #Javascript
微信小程序语音同步智能识别的实现案例代码解析
May 29 #Javascript
vue实现户籍管理系统
May 29 #Javascript
JavaScript闭包原理与用法学习笔记
May 29 #Javascript
You might like
php生成txt文件标题及内容的方法
2014/01/16 PHP
php输出形式实例整理
2020/05/05 PHP
javascript 表单的友好用户体现
2009/01/07 Javascript
jquery+json 通用三级联动下拉列表
2010/04/19 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
2014/05/02 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
2016/04/04 Javascript
关于网页中的无缝滚动的js代码
2016/06/09 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
2016/06/30 Javascript
Node实战之不同环境下配置文件使用教程
2018/01/02 Javascript
基于Vue实现电商SKU组合算法问题
2019/05/29 Javascript
微信小程序之左右布局的实现代码
2019/12/13 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
2020/01/20 Javascript
vue 自定义组件的写法与用法详解
2020/03/04 Javascript
vue 实现动态路由的方法
2020/07/06 Javascript
详解JavaScript自定义函数
2020/07/29 Javascript
浅谈js数组splice删除某个元素爬坑
2020/10/14 Javascript
[06:24]DOTA2 2015国际邀请赛中国区预选赛第二日TOP10
2015/05/27 DOTA
Python translator使用实例
2008/09/06 Python
Django处理Ajax发送的Get请求代码详解
2019/07/29 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
萨克斯第五大道的折扣店:Saks Fifth Avenue OFF 5TH
2016/08/25 全球购物
美国在线工具商店:Acme Tools
2018/06/26 全球购物
学前教育教师求职自荐信
2013/09/22 职场文书
行政经理岗位职责
2013/11/09 职场文书
合同专员岗位职责
2013/12/18 职场文书
班干部演讲稿
2014/04/24 职场文书
村党支部换届选举方案
2014/05/02 职场文书
小学数学教研活动总结
2014/07/01 职场文书
联谊活动总结
2014/08/28 职场文书
民族精神月活动总结
2014/08/28 职场文书
教师对照四风自我剖析材料
2014/09/30 职场文书
考试作弊万能检讨书
2014/10/19 职场文书
电力安全教育培训心得体会
2016/01/11 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书
MySQL新手入门进阶语句汇总
2022/09/23 MySQL