vue常用指令实现学生录入系统的实战
一、功能描述：
1，对于输入的内容进行简单的判断。
2，实现简单的增加和删除功能。
二、运行情况
图1 页面初始化情况
点击"添加新用户"如下：
图2： 添加一个新用户
图3：删除Anna和张三两个用户
全部代码如下所示：（直接复制到一个.html文件即可成功运行）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01-VUE的常用指令-综合练习</title>
<style>
#app {margin: 50px auto; width: 600px;}
fieldset {border: 1px solid orangered;margin-bottom:20px;}
fieldset input{width: 200px; height: 30px; margin: 10px 0;}
table{width: 600px;border: 2px solid orangered; text-align: center;}
thead{background-color: orangered;}
</style>
</head>
<body>
<div id="app">
<!-- 第一部分 -->
<fieldset>
<legend>学生录入系统</legend>
<div>
<span>姓名：</span>
<input type="text" placeholder="请输入姓名" v-model="newStudent.name">
</div>
<div>
<span>年龄：</span>
<input type="text" placeholder="请输入年龄" v-model="newStudent.age">
</div>
<div>
<span>性别：</span>
<select v-model="newStudent.sex">
<option>男</option>
<option>女</option>
</select>
</div>
<div>
<span>手机：</span>
<input type="text" placeholder="请输入手机号" v-model="newStudent.phone">
</div>
<div>
<button @click="createNewStu()">添加新用户</button>
</div>
</fieldset>
<!-- 第二部分 -->
<table>
<thead>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>手机</td>
<td>删除</td>
</tr>
</thead>
<tbody>
<tr v-for="(stu,index) in students" :key="index">
<td>{{stu.name}}</td>
<td>{{stu.sex}}</td>
<td>{{stu.age}}</td>
<td>{{stu.phone}}</td>
<td>
<button @click="delStudent(index)"> 删除</button>
</td>
</tr>
</tbody>
</table>
</div>
<script src="lib/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
students:[
{name:'张三',sex:'男',age:20,phone:'18722222'},
{name:'李四',sex:'女',age:10,phone:'18733333'},
{name:'王五',sex:'女',age:24,phone:'18744444'},
{name:'赵六',sex:'男',age:25,phone:'18755555'}
],
newStudent:{name:'',sex:'男',sge:'0',phone:''}
},
methods:{
//插入记录
createNewStu(){
//1,姓名不能为空
if(this.newStudent.name === ''){
alert('姓名不能为空');
return;
}
//2,验证年龄
if(this.newStudent.age <= 0){
alert('请输入正确的年龄');
return;
}
//3,验证手机号
if(this.newStudent.phone ===''){
alert('请输入正确的手机号');
return;
}
//4,插入新纪录
this.students.unshift(this.newStudent);
//5,清除记录
this.newStudent = {name:'',sex:'男',sge:'0',phone:''};
},
delStudent(index){
this.students.splice(index,1);
}
}
});
</script>
</body>
</html>
相关JS代码如下：
<script>
new Vue({
el:'#app',
data:{
students:[
{name:'张三',sex:'男',age:20,phone:'18722222'},
{name:'李四',sex:'女',age:10,phone:'18733333'},
{name:'王五',sex:'女',age:24,phone:'18744444'},
{name:'赵六',sex:'男',age:25,phone:'18755555'}
],
newStudent:{name:'',sex:'男',sge:'0',phone:''}
},
methods:{
//插入记录
createNewStu(){
//1,姓名不能为空
if(this.newStudent.name === ''){
alert('姓名不能为空');
return;
}
//2,验证年龄
if(this.newStudent.age <= 0){
alert('请输入正确的年龄');
return;
}
//3,验证手机号
if(this.newStudent.phone ===''){
alert('请输入正确的手机号');
return;
}
//4,插入新纪录
this.students.unshift(this.newStudent);
//5,清除记录
this.newStudent = {name:'',sex:'男',sge:'0',phone:''};
},
delStudent(index){
this.students.splice(index,1);
}
}
});
</script>
到此这篇关于vue常用指令实现学生录入系统的实战的文章就介绍到这了,更多相关vue 学生录入系统内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
vue实现在线学生录入系统
最近一直在学Vue,这次做了一个简单的在线学生信息录入系统来巩固一下所学知识. 因为主要是巩固Vue的知识,所以数据也没放数据库,也没用JavaBean或者Servlet,直接写死到表单里了. 具体页面是这样的: 先罗列一下其中用到的Vue的知识点: ①v-for指令的使用 ②v-model指令的使用 ③v-on/@click指令的使用 再提一下可能会用到的知识点: ①JavaScript中对数组头添元素的unshift()方法 ②JavaScript中对数组删除元素的splice()删除方法
-
vue实现学生录入系统之添加删除功能
一.案例代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue指令综合案例</title> <style> #app{ margin: 50px auto; width: 620px; } fieldset{ border: 2px solid plum; margin-bottom: 20px; } fieldset inp
-
vue常用指令实现学生录入系统的实战
一.功能描述: 1,对于输入的内容进行简单的判断. 2,实现简单的增加和删除功能. 二.运行情况 图1 页面初始化情况 点击"添加新用户"如下: 图2: 添加一个新用户 图3:删除Anna和张三两个用户 全部代码如下所示:(直接复制到一个.html文件即可成功运行) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <
-
vue常用指令代码实例总结
vue常用内置指令 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>12_指令_内置指令</title> <style> [v-cloak] { display: none } </style> </head> <body> <!-- 常用内置指令 v
-
Vue常用指令v-if与v-show的区别浅析
目录 前言 1. v-show 2. v-if 3. v-show和v-if的区别 1. 在原理方面的区别 2. 在使用应用场景方面的区别 总结 前言 v-show 和v-if 是比较常用的Vue指令,经常用来判断渲染部分代码块,但两者具体的区别在哪里呢 ??? 首先我们可以来看一下Vue中文社区说明文档的介绍: Vue中文社区说明文档中简单来说是:初始渲染的时候进行条件判断展示: 1. v-show v-show指令的作用是:根据真假值切换元素的显示状态,是响应式的 语法表达v-show =
-
Vue常用指令V-model用法
v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title&
-
Vue常用指令详解分析
Vue入门 Vue是一个MVVM(Model / View / ViewModel)的前端框架,相对于Angular来说简单.易学上手快,近两年也也别流行,发展速度较快,已经超越Angular了.比较适用于移动端,轻量级的框架,文件小,运行速度快.最近,闲来无事,所以学习一下Vue这个流行的框架,以备后用. 一.指令 v-model 多用于表单元素实现双向数据绑定(同angular中的ng-model) v-for 格式: v-for="字段名 in(of) 数组json" 循环数组或
-
Vue学习之常用指令实例详解
本文实例讲述了Vue常用指令.分享给大家供大家参考,具体如下: 1.创建一个vue实例 vue的一个特点就是数据驱动界面,一旦对js中的数据进行修改,界面中用到数据的地方也会立马做出更改.为了对界面进行操纵,需要先获取到界面的标签元素,并实例化一个vue实例. 例如在HTML创建一个div: <div id="app"> <p>{{msg}}</p> </div> 在js中将其实例化为vue对象: let app=new Vue({ el
-
又一款MVVM组件 Vue基础语法和常用指令（1）
前言:关于Vue框架,好几个月之前就听说过,了解一项新技术之后,总是处于观望状态,一直在犹豫要不要系统学习下.正好最近有点空,就去官网了解了下,看上去还不错的一个组件,就抽空研究了下.最近园子里vue也确实挺火,各种入门博文眼花缭乱,博主也不敢说写得多好,就当是个学习笔记,有兴趣的可以看看. 一.MVVM大比拼 关于MVVM,原来在介绍knockout.js的时候有过讲解,目前市面上比较火的MVVM框架也是一抓一大把,比如常见的有Knockout.js.Vue.js.React.Angularj
-
详解Vue中的基本语法和常用指令
什么是vue.js Vue.js是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于Weex) Vue.js 是前端的**主流框架之一**,和Angular.js.React.js 一起,并成为前端三大主流框架! Vue.js 是一套构建用户界面的框架,**只关注视图层**,它不仅易于上手,还便于与第三方库或既有项目整合.(Vue有配套的第三方类库,可以整合起来做大型项目的开发) Vue