vue常用指令實(shí)現(xiàn)學(xué)生錄入系統(tǒng)的實(shí)戰(zhàn)
更新時(shí)間：2022年02月11日 11:20:45 作者：Annaluo
本文主要介紹了vue常用指令實(shí)現(xiàn)學(xué)生錄入系統(tǒng)的實(shí)戰(zhàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
一、功能描述：
1，對(duì)于輸入的內(nèi)容進(jìn)行簡單的判斷。
2，實(shí)現(xiàn)簡單的增加和刪除功能。
二、運(yùn)行情況
圖1 頁面初始化情況
點(diǎn)擊"添加新用戶"如下：
圖2： 添加一個(gè)新用戶
圖3：刪除Anna和張三兩個(gè)用戶
全部代碼如下所示：（直接復(fù)制到一個(gè).html文件即可成功運(yùn)行）
<!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的常用指令-綜合練習(xí)</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>學(xué)生錄入系統(tǒng)</legend>
<div>
<span>姓名：</span>
<input type="text" placeholder="請(qǐng)輸入姓名" v-model="newStudent.name">
</div>
<div>
<span>年齡：</span>
<input type="text" placeholder="請(qǐng)輸入年齡" v-model="newStudent.age">
</div>
<div>
<span>性別：</span>
<select v-model="newStudent.sex">
<option>男</option>
<option>女</option>
</select>
</div>
<div>
<span>手機(jī)：</span>
<input type="text" placeholder="請(qǐng)輸入手機(jī)號(hào)" v-model="newStudent.phone">
</div>
<div>
<button @click="createNewStu()">添加新用戶</button>
</div>
</fieldset>
<!-- 第二部分 -->
<table>
<thead>
<tr>
<td>姓名</td>
<td>性別</td>
<td>年齡</td>
<td>手機(jī)</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,驗(yàn)證年齡
if(this.newStudent.age <= 0){
alert('請(qǐng)輸入正確的年齡');
return;
}
//3,驗(yàn)證手機(jī)號(hào)
if(this.newStudent.phone ===''){
alert('請(qǐng)輸入正確的手機(jī)號(hào)');
return;
}
//4,插入新紀(jì)錄
this.students.unshift(this.newStudent);
//5,清除記錄
this.newStudent = {name:'',sex:'男',sge:'0',phone:''};
},
delStudent(index){
this.students.splice(index,1);
}
}
});
</script>
</body>
</html>相關(guān)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,驗(yàn)證年齡
if(this.newStudent.age <= 0){
alert('請(qǐng)輸入正確的年齡');
return;
}
//3,驗(yàn)證手機(jī)號(hào)
if(this.newStudent.phone ===''){
alert('請(qǐng)輸入正確的手機(jī)號(hào)');
return;
}
//4,插入新紀(jì)錄
this.students.unshift(this.newStudent);
//5,清除記錄
this.newStudent = {name:'',sex:'男',sge:'0',phone:''};
},
delStudent(index){
this.students.splice(index,1);
}
}
});
</script>到此這篇關(guān)于vue常用指令實(shí)現(xiàn)學(xué)生錄入系統(tǒng)的實(shí)戰(zhàn)的文章就介紹到這了,更多相關(guān)vue 學(xué)生錄入系統(tǒng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了iView框架問題整理小結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了VUE項(xiàng)目中SASS的使用及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
本文主要介紹了Vue3怎么使用element-plus，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了vue的面包屑導(dǎo)航組件，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
vue封裝el-upload批量上傳只請(qǐng)求一次接口
本文主要介紹了vue封裝el-upload批量上傳只請(qǐng)求一次接口，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
基于Vue+element-ui 的Table二次封裝的實(shí)現(xiàn)
這篇文章主要介紹了基于Vue+element-ui 的Table二次封裝的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
Vue使用vm.$set()解決對(duì)象新增屬性不能響應(yīng)的問題
這篇文章主要介紹了Vue使用vm.$set()解決對(duì)象新增屬性不能響應(yīng)的問題,為了解決這個(gè)問題，Vue提供了一個(gè)特殊的方法vm.$set(object, propertyName, value)，也可以使用全局的Vue.set(object, propertyName, value)方法，需要的朋友可以參考下2023-05-05
vue的index.html中獲取環(huán)境變量和業(yè)務(wù)判斷圖文詳解
這篇文章主要給大家介紹了關(guān)于vue的index.html中獲取環(huán)境變量和業(yè)務(wù)判斷的相關(guān)資料,對(duì)vue來說index.html是一個(gè)總的入口文件,vue是單頁面應(yīng)用,掛在id為app的div下然后動(dòng)態(tài)渲染路由模板,需要的朋友可以參考下2023-09-09
這篇文章介紹了VueX安裝及使用基礎(chǔ)教程，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-01-01
這篇文章主要介紹了VUE里如何修改element-ui的顯示層次與上下間隔問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06