快捷導(dǎo)航

vue實(shí)現(xiàn)學(xué)生錄入系統(tǒng)之添加刪除功能

更新時(shí)間：2018年07月11日 10:42:12 作者：夏木炎

本文給大家?guī)?lái)一個(gè)小案例基于vue實(shí)現(xiàn)學(xué)生錄入系統(tǒng)功能，代碼簡(jiǎn)單易懂非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧

一.案例代碼

<!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 input{
  width: 200px;
  height: 30px;
  margin: 10px 0;
  }
  table{
  width: 620px;
  border: 2px solid plum;
  text-align: center;
  }
  thead{
  background-color: plum;
  }
  
 </style>
 </head>
 <body>
 <div id="app">
  <fieldset>
  <legend>學(xué)生錄入系統(tǒng)</legend>
  <div>
   <span>姓名：</span>
   <input type="text" placeholder="請(qǐng)輸入姓名" v-model="student.name"/>
   <span></span>
  </div>
  <div>
   <span>年齡：</span>
   <input type="text" placeholder="請(qǐng)輸入年齡" v-model="student.age"/>
  </div>
  <div>
   <span>性別：</span>
   <select v-model="student.sex">
   <option value="男">男</option>
   <option value="女">女</option>
   </select>
  </div>
  <div>
   <span>QQ：</span>
   <input type="text" placeholder="請(qǐng)輸入QQ" v-model="student.QQ"/>
  </div>
  <button @click="createNewStudent()">創(chuàng)建新用戶(hù)</button>
  </fieldset>
  <table>
  <thead>
   <tr>
   <td>姓名</td>
   <td>年齡</td>
   <td>性別</td>
   <td>QQ</td>
   <td>刪除</td>
   </tr>
  </thead>
  <tbody>
   <tr v-for="(p,index) in persons">
   <td>{{p.name}}</td>
   <td>{{p.age}}</td>
   <td>{{p.sex}}</td>
   <td>{{p.QQ}}</td>
   <td><button @click="deleteStudentMsg(index)">刪除</button></td>
   </tr>
  </tbody>
  </table>
 </div>
 <script type="text/javascript" src="js/jquery.js" ></script>
 <script type="text/javascript" src="js/vue.js" ></script>
 <script>
  //1.創(chuàng)建Vue的實(shí)例
  let vm=new Vue({
  el:'#app',
  data:{
   persons:[
    {name:'張三',age:16,sex:'男',QQ:'123456'},
    {name:'李四',age:17,sex:'男',QQ:'100000'},
    {name:'王麻子',age:18,sex:'女',QQ:'666666'},
    {name:'趙六',age:19,sex:'男',QQ:'888888'},
    {name:'劉七',age:20,sex:'女',QQ:'999999'}
   ],
   student:{name:'',age:0,sex:'男',QQ:''}
  },
  methods:{
   //創(chuàng)建一條新記錄
   createNewStudent(){
   //姓名不能為空
   if(this.student.name==''){
    alert('姓名不能為空');
    return;
   }
   //年齡不能小于0
   if(this.student.age<0){
    alert('請(qǐng)輸入正確年齡');
    return;
   }
   //QQ
   if(this.student.age==''){
    alert('請(qǐng)輸入正確年齡');
    return;
   }
   //往數(shù)組中添加一條新記錄
   this.persons.unshift(this.student);
   //清空數(shù)據(jù)
   this.student={name:'',age:0,sex:'男',QQ:''};
   },
   //刪除
   deleteStudentMsg(index){
   this.persons.splice(index,1);
   }
  }
  });
 </script>
 </body>
</html>

二.結(jié)果

總結(jié)

以上所述是小編給大家介紹的vue實(shí)現(xiàn)學(xué)生錄入系統(tǒng)之添加刪除功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

vue實(shí)現(xiàn)echarts中的儀表盤(pán)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)echarts中的儀表盤(pán)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
如何在Vue中實(shí)現(xiàn)登錄驗(yàn)證功能(代碼示例)
Vue是一種流行的JavaScript框架,可以幫助開(kāi)發(fā)者建立高效的Web應(yīng)用程序,本文將為您介紹如何在Vue中實(shí)現(xiàn)登錄驗(yàn)證功能,并為您提供具體的代碼示例,感興趣的朋友一起看看吧
2023-11-11
Element-UI組件實(shí)現(xiàn)面包屑導(dǎo)航欄的示例代碼
面包屑導(dǎo)航欄是一種用戶(hù)界面組件,用于展示用戶(hù)在網(wǎng)站或應(yīng)用中的路徑,它包括了從主頁(yè)到當(dāng)前頁(yè)面的鏈接序列,有助于用戶(hù)快速了解和導(dǎo)航至上級(jí)頁(yè)面,本文就來(lái)介紹一下Element-UI組件實(shí)現(xiàn)面包屑導(dǎo)航欄的示例代碼,感興趣的可以了解一下
2024-09-09
vuejs動(dòng)態(tài)組件給子組件傳遞數(shù)據(jù)的方法詳解
這篇文章主要介紹了vuejs動(dòng)態(tài)組件給子組件傳遞數(shù)據(jù)的方法詳解的相關(guān)資料,需要的朋友可以參考下
2016-09-09
深入了解vue中一鍵復(fù)制功能的實(shí)現(xiàn)
在現(xiàn)代的Web應(yīng)用中,用戶(hù)體驗(yàn)至關(guān)重要,而提供簡(jiǎn)單易用的復(fù)制功能是改善用戶(hù)體驗(yàn)的一項(xiàng)關(guān)鍵功能,本文將為大家詳細(xì)介紹Vue實(shí)現(xiàn)一鍵復(fù)制功能的具體方法,需要的可以參考下
2023-11-11
Vue 動(dòng)態(tài)添加路由及生成菜單的方法示例
這篇文章主要介紹了Vue 動(dòng)態(tài)添加路由及生成菜單的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06
如何利用vue3實(shí)現(xiàn)放大鏡效果實(shí)例詳解
最近有項(xiàng)目需要用到對(duì)圖片進(jìn)行局部放大,類(lèi)似淘寶商品頁(yè)的放大鏡效果,經(jīng)過(guò)一番研究功能可用,下面這篇文章主要給大家介紹了關(guān)于如何利用vue3實(shí)現(xiàn)放大鏡效果的相關(guān)資料,需要的朋友可以參考下
2021-09-09
Vue兩個(gè)通信方式與動(dòng)畫(huà)過(guò)度及混入使用介紹
最近在寫(xiě)vue的一個(gè)項(xiàng)目要實(shí)現(xiàn)過(guò)渡的效果,雖然vue動(dòng)畫(huà)不是強(qiáng)項(xiàng),庫(kù)也多,但是基本的坑還是得踩扎實(shí),下面這篇文章主要給大家介紹了關(guān)于Vue中實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)效果的相關(guān)資料,需要的朋友可以參考下
2023-03-03
Vue axios 跨域請(qǐng)求無(wú)法帶上cookie的解決
這篇文章主要介紹了Vue axios 跨域請(qǐng)求無(wú)法帶上cookie的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-09-09
vue3 elementPlus 表格實(shí)現(xiàn)行列拖拽及列檢索功能(完整代碼)
本文通過(guò)實(shí)例代碼給大家介紹vue3 elementPlus 表格實(shí)現(xiàn)行列拖拽及列檢索功能,代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2023-10-10