VUE写一个本地教室管理系统

实现效果
主体
模态框
Vue JS主体
Vue实现删除功能
- splice语法
Vue实现添加功能
- push()语法
Vue实现修改功能
源码

实现效果

点击添加按钮后，实现弹框

点击修改，实现弹框，并传入数据

主体

<table class="table table-hover"><!-- <caption>本地教室管理系统</caption> --><thead><tr><th>教室名称</th><th>所在机构</th><th>详细地址</th><th>上课地点</th><th>座位数量</th><th>操作</th></tr></thead><tbody><!-- <tr><td>0</td><td>木铎楼</td><td>C403</td><td>软件所</td><td>button</td></tr> --><tr v-for="(item,index) in dataList"><td>{{item.classroom}}</td><td>{{item.department}}</td><td>{{item.address}}</td><td>{{item.building}}</td><td>{{item.num}}</td><td><!-- 按钮：用于打开模态框 --><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" @click="modify(item,index)">修改</button><button type="button" class="btn btn-primary"  @click="remove(index)" >删除</button></td><!-- 模态框 --></tr>        </tbody></table>

模态框

 <div class="modal fade" id="myModal"><div class="modal-dialog moddal-sm"><div class="modal-content"><div class="modal-header"><h4 class="modal-title">修改</h4><button type="button" class="close" data-dismiss="modal">&times;</button></div><div class="modal-body"><span>教室名称：<input type="text" v-model="modifyData.classroom" value="" class="form-control"></span><br><span>所在机构: <input type="text" v-model="modifyData.department" value="" class="form-control"></span><br><span>详细地址: <input type="text" v-model="modifyData.address" value="" class="form-control"></span><br><span>上课地点: <input type="text" v-model="modifyData.building" value="" class="form-control"></span><br><span>座位数量: <input type="text" v-model="modifyData.num" value="" class="form-control"></span></div><div class="modal-footer"><button type="button" class="btn btn-primary" datadismiss="modal" @click="savechange(modifyData,mask)">保存</button></div></div></div></div>

Vue JS主体

var app = new Vue({el:"#app",data:{mask: -1,classroom:"",department:"",address:"",building:"",num:"",dataList: [],modifyData: {},},  methods: {}
})

Vue实现删除功能

  remove: function(index){this.dataList.splice(index, 1);// console.log("删除");},

splice语法

array.splice(index,howmany,item1,…,itemX)

参数	描述
index	必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany	可选。规定应该删除多少元素。必须是数字，但可以是 “0”。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
item1, …, itemX	可选。要添加到数组的新元素

链接: 菜鸟教程-JavaScript splice() 方法.

====

引用文本

Vue实现添加功能

 adddata: function() {this.dataList.push({classroom: this.new_classroom, department: this.department, address: this.address, building: this.building, num: this.num});  },

push()语法

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
push() 方法可把它的参数顺序添加到 arrayObject 的尾部。它直接修改 arrayObject，而不是创建一个新的数组。
链接: JavaScript push() 方法

Vue实现修改功能

 savechange: function(item,mask) {Vue.set(this.dataList,mask,item);alert("修改成功！");},

Vue.set(object, key, value)

objiect传入数组， key呢就是数组中你要修改的item的index，value就是你想要修改的内容。

源码

class.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!-- 为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签 --><!-- width=device-width 表示宽度是设备屏幕的宽度。initial-scale=1 表示初始的缩放比例。 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>本地教室管理系统</title><link rel="stylesheet" href="class.css"><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" rel="stylesheet"><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body> <div id="app" class="container"><button type="button" class="btn btn-outline-primary float-right" data-toggle="modal" data-target="#add_myModal" >添加</button><div class="modal fade" id="add_myModal"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h4 class="modal-title">添加</h4><button type="button" class="close" data-dismiss="modal">&times;</button></div><div class="modal-body"><span>教室名称：<input type="text" v-model="classroom" value="" class="form-control"></span><br><span>所在机构: <input type="text" v-model="department" value="" class="form-control"></span><br><span>详细地址: <input type="text" v-model="address" value="" class="form-control"></span><br><span>上课地点: <input type="text" v-model="building" value="" class="form-control"></span><br><span>座位数量: <input type="text" v-model="num" value="" class="form-control"></span></div><div class="modal-footer"><button type="button" class="btn btn-primary" datadismiss="modal" @click="adddata">确定</button></div></div></div></div><table class="table table-hover"><!-- <caption>本地教室管理系统</caption> --><thead><tr><th>教室名称</th><th>所在机构</th><th>详细地址</th><th>上课地点</th><th>座位数量</th><th>操作</th></tr></thead><tbody><!-- <tr><td>0</td><td>木铎楼</td><td>C403</td><td>软件所</td><td>button</td></tr> --><tr v-for="(item,index) in dataList"><td>{{item.classroom}}</td><td>{{item.department}}</td><td>{{item.address}}</td><td>{{item.building}}</td><td>{{item.num}}</td><td><!-- 按钮：用于打开模态框 --><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" @click="modify(item,index)">修改</button><button type="button" class="btn btn-primary"  @click="remove(index)" >删除</button></td><!-- 模态框 --><div class="modal fade" id="myModal"><div class="modal-dialog moddal-sm"><div class="modal-content"><div class="modal-header"><h4 class="modal-title">修改</h4><button type="button" class="close" data-dismiss="modal">&times;</button></div><div class="modal-body"><span>教室名称：<input type="text" v-model="modifyData.classroom" value="" class="form-control"></span><br><span>所在机构: <input type="text" v-model="modifyData.department" value="" class="form-control"></span><br><span>详细地址: <input type="text" v-model="modifyData.address" value="" class="form-control"></span><br><span>上课地点: <input type="text" v-model="modifyData.building" value="" class="form-control"></span><br><span>座位数量: <input type="text" v-model="modifyData.num" value="" class="form-control"></span></div><div class="modal-footer"><button type="button" class="btn btn-primary" datadismiss="modal" @click="savechange(modifyData,mask)">保存</button></div></div></div></div></tr>        </tbody></table></div><!-- <script>$(document).ready(function(){$('[data-toggle="popover"]').popover();   });</script> --><script type="text/javascript" src="class.js"></script>
</body>
</html>

class.js

var app = new Vue({el:"#app",data:{mask: -1,classroom:"",department:"",address:"",building:"",num:"",dataList: [{classroom: '112', department: 'xxx', address: '广东省珠海市', building: '木铎楼', num: '123'},{classroom: '444', department: 'xxx', address: '广东省珠海市', building: '木铎楼', num: '20'},{classroom: '集成测试教室', department: 'xxx', address: '广东省珠海市', building: '木铎楼', num: '56'},{classroom: '50', department: 'xxx', address: '广东省珠海市6666', building: '木铎楼', num: '0'},{classroom: '室外', department: 'xxx', address: '广东省珠海市', building: '木铎楼', num: '10000'},{classroom: '555', department: 'xxx', address: '广东省珠海市', building: '木铎楼', num: '12'},{classroom: '222', department: 'xxx', address: '广东省珠海市', building: '木铎楼', num: '123'},{classroom: '室外', department: 'xxx', address: '广东省珠海市', building: '木铎楼', num: '50'}],modifyData: {},},  methods: {modify(item,index){this.mask = index;this.modifyData = {classroom: item.classroom,department: item.department,address: item.address,building: item.building,num: item.num }},adddata: function() {this.dataList.push({classroom: this.new_classroom, department: this.department, address: this.address, building: this.building, num: this.num});alert("添加成功！");$('#add_myModal').modal('hide');},remove: function(index){this.dataList.splice(index, 1);// console.log("删除");},savechange: function(item,mask) {Vue.set(this.dataList,mask,item);alert("修改成功！");$('#myModal').modal('hide');}}
})

VUE写一个本地教室管理系统相关推荐

[vue] 使用vue写一个tab切换
[vue] 使用vue写一个tab切换 v-for循环,利用下标和v-show显示`<div id="app"><ul class="tabs" ...
用vue写一个npm包(package)，发布及引用
提示:vue写一个npm包(package) 文章目录前言一.npm 二.npm package开发三.引用package 总结前言之前一直都是用别人封装好的npm包,新接了一个需求,自己写 ...
用vue写一个计算总价
用vue写一个计算总价点击移除可以删除本项点击加减实现加减总价随着数量增加 <!DOCTYPE html> <html><head><meta char ...
用C/C++写一个电子名片管理系统
用C/C++写一个电子名片管理系统要包含的头文件首先定义联系人的结构体.根据需要定义结构体内容和声明所需要的功能函数其次是菜单函数用来选择各种功能下面是各个功能函数然后是以联系人电话为名字, ...
用Java写一个公司员工管理系统!
用Java写一个公司员工管理系统! 今天看CSDN发现写管理系统的文章不少,我在这里也给大家用java写一篇!(当然这里只是最简单的那种qwq) 核心功能:对员工各项信息的管理采用属性文件+资源文件 ...
VUE写一个顶部导航栏
最近一个实验要做一个中超足球联赛的数据库设计,我打算采用springboot+vue来完成,现在是从零开始学习vue的过程,先试着写一个顶部导航栏.效果如下: 新建一个navbar的组件首先在APP ...
基于python+vue+elementUI+django高校教室管理系统(前后端分离)#毕业设计
随着社会的发展,社会的各行各业都在利用信息化时代的优势.计算机的优势和普及使得各种信息系统的开发成为必需. 高校教室管理系统,主要的模块包括查看首页.个人中心.教师管理.学生管理.教室信息管理.教师申 ...
vue 实现无限轮播_用vue写一个轮播图效果
轮播图在网站中几乎无处不在,占用地方少,交互性好.今天就来聊聊如何用vue实现一个轮播效果. 一.原理在轮播图数组dataList中,定义一个变量currentIndex = 0表示第一张图片,默认 ...
消消乐实现下坠_教你用Vue写一个开心消消乐
之前做过一个算法题,算法要求就是写一个开心消消乐的逻辑算法,当时也是考虑了一段时间才做出来.后来想了想,既然核心算法都有了,能不能实现一个开心消消乐的小游戏呢,于是花了两天时间做了一个小游戏出来. 效 ...

VUE写一个本地教室管理系统

VUE写一个本地教室管理系统

实现效果

主体

模态框

Vue JS主体

Vue实现删除功能

splice语法

Vue实现添加功能

push()语法

Vue实现修改功能

源码

VUE写一个本地教室管理系统相关推荐

最新文章

热门文章