Hey,天还没亮，夜猫子，要注意身体哦！

Vue.js入门小demo：信息录入

发布于2018-6-6 分类：JS / Vue.js / 前端 评论(0) 阅读(2,396)
　　　

最近在学Vue.js，写了几个demo，最近会更新在学习和写demo时遇到的问题及解决办法。

这篇文章的信息录入demo主要用到了v-model、{{msg}}、v-on:keyup（@keyup）、v-on:click（@click）、v-for、v-show、mounted、filters、mounted，数据采用loaclStorage储存。

代码如下（CSS没写）：
  1. <section id="app">
  2.   <fieldset>
  3.     <legend>填入信息</legend>
  4.     <div>
  5.       <label for="newName">姓名：</label>
  6.       <!--绑定data：newPerson.name-->
  7.       <input type="text" id="newName" v-model="newPerson.name" />
  8.     </div>
  9.     <div>
  10.       <label for="newAge">年龄：</label>
  11.       <!--绑定data：newPerson.age，按键事件-->
  12.       <input type="text" id="newAge" v-model="newPerson.age" @keyup="addEnter($event)" />
  13.     </div>
  14.     <div>
  15.       <label for="newSex">性别：</label>
  16.       <!--绑定data：newPerson.sex-->
  17.       <select name="newSex" id="newSex" v-model="newPerson.sex" >
  18.         <option value="男">男</option>
  19.         <option value="女">女</option>
  20.       </select>
  21.     </div>
  22.     <div>
  23.       <!--点击事件，插入新信息x-->
  24.       <input type="button" id="addBtn" value="增加" @click="addPerson" />
  25.     </div>
  26.   </fieldset>
  27.   <table>
  28.     <tbody>
  29.       <tr>
  30.         <th>序号</th>
  31.         <th>姓名</th>
  32.         <th>年龄</th>
  33.         <th>性别</th>
  34.         <th>删除</th>
  35.       </tr>
  36.       <!--for循环绑定数据-->
  37.       <tr v-for="(person,index) in people">
  38.         <td><span>{{index+1}}</span></td>
  39.         <td><span>{{person.name}}</span></td>
  40.         <td><span>{{person.age | toInt}}</span></td>
  41.         <td><span>{{person.sex}}</span></td>
  42.         <!--点击事件，删除当前行-->
  43.         <td><input type="button" value="×" @click="delPerson(index)" /></td>
  44.       </tr>
  45.     </tbody>
  46.   </table>
  47.   <div id="tips" v-show="isShow">暂无人员信息</div>
  48. </section>
  49. <script>
  50. var vm = new Vue({
  51.   el: "#app",
  52.   data: {
  53.     //新填信息
  54.     newPerson: {
  55.       name: "",
  56.       age: null,
  57.       sex: "男"
  58.     },
  59.     //人员信息
  60.     people: [],
  61.     //是否显示“无数据”提示
  62.     isShow:false
  63.   },
  64.   //调用vue生命周期，在模板挂载完成后执行，初始化localStorage信息
  65.   mounted:function(){
  66.     this.initPeople();
  67.   },
  68.   methods: {
  69.     //初始人员信息，取自localStorage=>people
  70.     initPeople:function(){
  71.       if(localStorage.getItem("people") == null || localStorage.getItem("people") == "" || localStorage.getItem("people") == "[]"){
  72.         this.people = [];
  73.         this.isShow = true;
  74.       }
  75.       else{
  76.         //字符串转对象
  77.         this.people = JSON.parse(localStorage.getItem("people"));
  78.         this.isShow = false;
  79.       }
  80.     },
  81.     //增加新人员
  82.     addPerson: function() {
  83.       if(this.newPerson.name == ""){
  84.         alert("姓名不能为空！")
  85.       }
  86.       else if (this.newPerson.age == "" || this.newPerson.age ==  null){
  87.         alert("年龄不能为空！")
  88.       }
  89.       else if (isNaN(this.newPerson.age)){
  90.         alert("年龄只能为数字！")
  91.         this.newPerson.age = "";
  92.       }
  93.       else{
  94.         //在末尾增加一个新人
  95.         this.people.push(this.newPerson);
  96.         //数组转JSON字符串
  97.         localStorage.setItem("people",JSON.stringify(this.people));
  98.         this.newPerson = {
  99.           "name": "",
  100.           age: null,
  101.           sex: "男"
  102.         };
  103.         //隐藏提示
  104.         this.isShow = false;
  105.         }
  106.     },
  107.     //回车触发添加新人
  108.     addEnter:function(eve){
  109.       if(eve.keyCode == 13){
  110.         this.addPerson();
  111.       }
  112.     },
  113.     //删除某一行的人
  114.     delPerson: function(index) {
  115.       this.people.splice(index, 1);
  116.       //数组转JSON字符串
  117.       localStorage.setItem("people",JSON.stringify(this.people));
  118.       if(this.people == ""){
  119.         this.isShow = true;
  120.       }
  121.     }
  122.   },
  123.   //过滤器，转Int
  124.   filters: {
  125.     toInt(val) {
  126.       return parseInt(val)
  127.     }
  128.   }
  129. })
  130. </script>

在线预览

未经允许不得转载：Rising Sun's Blog » JS / Vue.js / 前端 » Vue.js入门小demo：信息录入
标签：
评论 0
 
 
发表评论