Vue의 호적관리 시스템 구현 사례 분석

이 글의 예시는 참고용으로 호적관리 시스템을 구현하기 위한 Vue의 구체적인 코드를 공유하고 있습니다. 구체적인 내용은 다음과 같습니다

호적관리 시스템, v-model, v-for

인터페이스 미리보기

단계 아이디어:

1.html+css 생성

2. vue, 인스턴스 소개

3 기본 데이터, v-for 루프 형식을 준비합니다.

5. 새 데이터 생성 newmessage

6. 입력 상자 v-model에 바인딩

7. 기본 데이터인 newmessage->message

에 새 데이터를 추가하는 추가 함수를 만듭니다. 추가 후 양식 지우기, 즉 새 메시지 복원

9. who deletes who del() 기능

본문 부분:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<p id = &#39;app&#39; v-cloak>
 <legend>户籍管理系统</legend></br>
 姓名：<input type="text" placeholder="请输入用户名" v-model = &#39;newmessage.name&#39;></br>
 年龄：<input type="text" placeholder="请输入年龄" v-model = &#39;newmessage.age&#39;></br>
 性别：
 <select v-model = &#39;newmessage.sex&#39;>
 <option>男</option>
 <option>女</option>
 </select></br>
 手机：<input type="text" placeholder="请输入手机号" v-model = &#39;newmessage.phone&#39;></br>
 <button class = &#39;save&#39; @click = &#39;add()&#39;>保存至用户</button></br>
 <table>
 <tr class = &#39;title&#39;>
 <td width = &#39;100px&#39;>姓名</td>
 <td width = &#39;100px&#39;>性别</td>
 <td width = &#39;100px&#39;>年龄</td>
 <td width = &#39;200px&#39;>手机</td>
 <td width = &#39;100px&#39;>删除</td>
 </tr>
 <tr v-for = &#39;item,index in message&#39;>
 <td>{{item.name}}</td>
 <td>{{item.sex}}</td>
 <td>{{item.age}}</td>
 <td>{{item.phone}}</td>
 <td><button @click = &#39;del(index)&#39;>删除</button></td>
 </tr>
 </table>
</p>

vue 부분:

<script>
 var app = new Vue({
 el:&#39;#app&#39;,
 data:{
 message:[
  {
  name:&#39;张三&#39;,
  sex:&#39;女&#39;,
  age:16,
  phone:&#39;1568888811&#39;
  },
  {
  name:&#39;李四&#39;,
  sex:&#39;男&#39;,
  age:26,
  phone:&#39;1456666622&#39;
  },
  {
  name:&#39;王麻子&#39;,
  sex:&#39;女&#39;,
  age:36,
  phone:&#39;1866666666&#39;
  },
 ],
 newmessage:{name:&#39;&#39;,age:&#39;&#39;,sex:&#39;男&#39;,phone:&#39;&#39;},
 
 },
 methods:{
 add(){
  if(!this.newmessage.name == &#39;&#39;){
  this.message.push(this.newmessage);
  this.newmessage = {
  name:&#39;&#39;,
  age:&#39;&#39;,
  sex:&#39;男&#39;,
  phone:&#39;&#39;
  };
  }
  else{
  alert(&#39;请输入姓名！&#39;);
  }
 },
 del(index){
  this.message.splice(index,1);
 }
 }
 })
 </script>

css 스타일:

<style>
 *{
 margin:0;
 padding:0;
 }
 #app{
 border: 1px solid black;
 width:800px;
 padding:30px 30px;
 }
 #app .save{
 background-color: #555555;
 border-radius: 10%;
 height:50px;
 color:white;
 }
 #app input,select{
 margin:10px 0;
 width:300px;
 }
 #app td{
 text-align: center;
 }
 #app .title td{
 background-color: #555555;
 color:white;
 }
 #app table button{
 background-color: #555555;
 color:white;
 border-radius: 30%;
 }
 </style>

관련 학습 권장 사항:

자바스크립트 비디오 튜토리얼

위 내용은 Vue의 호적관리 시스템 구현 사례 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!