So implementieren Sie die Funktion zur Eingabe von Mitarbeiterinformationen in Vue-js-Tutorial-php.cn

So implementieren Sie die Funktion zur Eingabe von Mitarbeiterinformationen in Vue

coldplay.xixi

Freigeben： 2020-07-11 17:39:11

nach vorne

3044 Leute haben es durchsucht

So implementieren Sie die Funktion zur Eingabe von Mitarbeiterinformationen in Vue

Vue allgemeine Informationseingabeschnittstelle als Referenz, der spezifische Inhalt ist wie folgt

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>员工信息录入</title>

 <style>

 .btn1{
  color: blue;
  background: skyblue;
  text-align: center;
 }

 </style>
</head>
<body>

 <p id="p2">

 <fieldset>
  <legend>员工信息录入</legend>


  <p >

  <label>姓名：</label>
  <input type="text" v-model="newStudent.name"><br>
  <label>年龄：</label>
  <input type="text" v-model="newStudent.age"><br>

  <label>性别：</label>
  <select v-model="newStudent.sex">>
   <option value="男">男</option>
   <option value="女">女</option>
  </select><br>
  <label>手机：</label>
  <input type="text" v-model="newStudent.phoneNo"><br>
  <p>
  <button @click="createStudent()">新增用户</button>
  </p>

  </p>


  <table border="2px">
  <thead>
   <tr>
   <th>序号</th>
   <th>姓名</th>
   <th>年龄</th>
   <th>性别</th>
   <th>手机</th>
   <th>操作</th>
   </tr>

  </thead>

  <tbody>
   <tr v-for="(student,index) in studentsList">
   <td>{{index+1}}</td>
   <td>{{student.name}}</td>
   <td>{{student.age}}</td>
   <td>{{student.sex}}</td>
   <td>{{student.phoneNo}}</td>
   <td :class="btn1"><button @click="DeletestudentRow(index)">移除</button></td>
   </tr>


  </tbody>


  </table>
  <label>总行数：</label><span>{{studentsList.length}}</span>

 </fieldset>


 </p>



</body>
<script src="js/vue.js"></script>
<script>

 var p1Data={
 newStudent:{name:"",age:0,sex:"男",phoneNo:""},
 studentsList:[{No:"0001",name:"张三",age:18,sex:"男",phoneNo:"13688899900"},
  {No:"0112",name:"王五",age:28,sex:"男",phoneNo:"18800068888"},
  {No:"0253",name:"林志玲",age:33,sex:"女",phoneNo:"18600001002"},
  {No:"0608",name:"林志颖",age:68,sex:"男",phoneNo:"15998769900"}],
 };


 var vm1=new Vue({
 el:"#p2",
 data:p1Data,

 methods:{

  //移除一行
  DeletestudentRow:function (index) {
  this.studentsList.splice(index,1);
  },


  //添加一行
  createStudent: function(){
  this.studentsList.push(this.newStudent);
  // 添加完newPerson对象后，重置newPerson对象
  this.newStudent = {name:"",age:0,sex:"男",phoneNo:""}
  },


 }



 });


</script>
</html>

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Lernen aller hilfreich ist. Ich hoffe auch, dass jeder Script Home unterstützt.

Verwandte Lernempfehlungen: Javascript-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Funktion zur Eingabe von Mitarbeiterinformationen in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!