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 相关文章推荐
javascript中兼容主流浏览器的动态生成iframe方法
May 05 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
May 09 Javascript
Google Maps API地图应用示例分享
Oct 23 Javascript
jQuery不使用插件及swf实现无刷新文件上传
Dec 08 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
Mar 25 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
Jan 28 Javascript
JavaScript判断数字是否为质数的方法汇总
Jun 02 Javascript
JS自定义函数实现时间戳转换成date的方法示例
Aug 27 Javascript
Angular4学习笔记之根模块与Ng模块
Sep 09 Javascript
Vue精简版风格指南(推荐)
Jan 30 Javascript
聊聊Vue 中 title 的动态修改问题
Jun 11 Javascript
实例讲解React 组件
Jul 07 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
建立文件交换功能的脚本(一)
2006/10/09 PHP
php getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
php处理restful请求的路由类分享
2014/02/27 PHP
PHP内存缓存Memcached类实例
2014/12/08 PHP
详谈php ip2long 出现负数的原因及解决方法
2017/04/05 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
javascript上传图片前预览图片兼容大多数浏览器
2013/10/25 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
2015/09/17 Javascript
js ajaxfileupload.js上传报错的解决方法
2016/05/05 Javascript
详解Node.js模块间共享数据库连接的方法
2016/05/24 Javascript
在线引用最新jquery文件的实现方法
2016/08/26 Javascript
jquery图片放大镜效果
2017/06/23 jQuery
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
在vue中使用Autoprefixed的方法
2018/07/27 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
vue中tab选项卡的实现思路
2018/11/25 Javascript
jQuery实现的简单日历组件定义与用法示例
2018/12/24 jQuery
python 字典(dict)按键和值排序
2016/06/28 Python
python使用threading获取线程函数返回值的实现方法
2017/11/15 Python
python3 图片referer防盗链的实现方法
2018/03/12 Python
python实现简单tftp(基于udp协议)
2018/07/30 Python
在Django中URL正则表达式匹配的方法
2018/12/20 Python
Python 私有化操作实例分析
2019/11/21 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
Python collections.deque双边队列原理详解
2020/10/05 Python
美国特价机票专家:Airfarewatchdog
2018/01/24 全球购物
Java文件和目录(IO)操作
2014/08/26 面试题
九一八事变纪念日演讲稿
2014/09/14 职场文书
授权委托书(法人单位用)
2014/09/29 职场文书
大学生个人总结范文
2015/02/15 职场文书
年度考核个人总结
2015/03/06 职场文书
本科毕业论文致谢词
2015/05/14 职场文书
销售口号霸气押韵
2015/12/24 职场文书
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle