vue.js之常操作（實例）
阿新 • • 發佈：2017-08-03
tex styles title oct lar per click 一個 lis
聽說大家都開始用react、vue這些MVVM框架了，為了不落後，還是學學吧！（之前只對angular了解一點，時間一長，也忘得差不多了，所以學習vue相當於從小白開始）
從vue.js官網看一下，先學習幾個基本指令：v-if、v-show、v-bind、v-model、v-for、v-on，然後一起做一個練習。
要實現上圖功能，構思一下應該會用到什麽指令，代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue綜合練習</title> <link rel="stylesheet" href="css/bootstrap.css" /> <script src="https://unpkg.com/vue"></script> <style> table th,table td{ text-align: center; } </style> </head> <body> <div id="app"> <div class="form form-horizontal col-lg-10 col-md-10 col-lg-offset-1 col-md-offset-1"> <div class="form-group"> <label for="name" class="col-lg-1 col-md-1 col-sm-2 control-label">姓名：</label> <div class=" col-lg-11 col-md-11 col-sm-10"> <input type="text" class="form-control" id="name" placeholder="請輸入姓名" v-model="newPerson.name"/> </div> </div> <div class="form-group"> <label for="age" class="col-lg-1 col-md-1 col-sm-2 control-label">年齡：</label> <div class=" col-lg-11 col-md-11 col-sm-10"> <input type="text" class="form-control" id="age" placeholder="請輸入年齡" v-model="newPerson.age"/> </div> </div> <div class="form-group"> <label for="sex" class="col-lg-1 col-md-1 col-sm-2 control-label">性別：</label> <div class=" col-lg-11 col-md-11 col-sm-10"> <label class="radio-inline"><input type="radio" name="radiolist" v-model="newPerson.sex" value="男"/>男</label> <label class="radio-inline"><input type="radio" name="radiolist" v-model="newPerson.sex" value="女"/>女</label> </div> </div> <div class="form-group"> <button class="col-lg-1 col-md-1 col-sm-2 col-lg-offset-6 col-md-offset-6 btn btn-success" v-on:click="creat()">添加</button> </div> </div> <div class="col-lg-10 col-md-10 col-lg-offset-1 col-md-offset-1"> <table class="table table-bordered table-striped table-hover" > <thead> <th>姓名</th> <th>性別</th> <th>年齡</th> <th>操作</th> </thead> <tbody> <tr v-for="(person,index) in people"> <td>{{person.name}}</td> <td>{{person.sex}}</td> <td>{{person.age}}</td> <td><button class="btn btn-success" v-on:click="deletePerson(index)">刪除</button></td> </tr> </tbody> </table> </div> </div> <script> var app=new Vue({ el:"#app", data:{ newPerson:{ name:"", sex:"男",//第一次的默認值 age:"0", }, people:[{ name:"jack", sex:"男", age:28, }, { name:"Bill", sex:"男", age:25, }, { name:"Tracy", sex:"女", age:20, }, ] }, methods:{ creat:function(){ this.people.push(this.newPerson); this.newPerson={name:"",sex:"男",age:"0"}//sex每次添加時不選擇的默認值 }, deletePerson:function(index){ this.people.splice(index,1); } }, }) </script> </body> </html>
vue.js之常操作（實例）