vue--練習（登入demo）
阿新 • • 發佈：2019-01-05
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src='jquery.min.js'></script> <link rel="stylesheet" href="bootstrap.min.css"> <script src='vue.min.js'></script> </head> <body> <!-- 模板 將Vue的變數解除安裝{{}}中--> <div id='box'> <form action=''> <div class="form-group"> <label for="exampleInputEmail1">姓名</label> <input type="text" class="form-control" v-model='name'> </div> <div class="form-group"> <label for="exampleInputPassword1">年齡</label> <input type="text" class="form-control" v-model='age'> </div> </form> <button class="btn btn-success" @click='submit'>確定</button> <button class="btn btn-primary" @click='sort'>按年齡排序</button> <table class='table table-bordered table-striped table-hover' style='text-align:center;'> <tr> <th>序號</th> <th>姓名</th> <th>年齡</th> <th>選項</th> </tr> <tr v-for='(item,i) in people'> <!-- 序號最好用下標值，可以隨著我們的刪除而自動更新 --> <td>{{i+1}}</td> <td>{{item.name}}</td> <td>{{item.age}}</td> <td> <button class="btn btn-danger btn-sm" @click='del(i)'>刪除</button> </td> </tr> <tr v-show='people.length===0?true:false'> <td colspan="4">請輸入資料</td> </tr> </table> </div> <script> new Vue({ el:'#box', data:{ name:'', age:'', people:[] }, methods:{ submit(){ this.people.push({ name:this.name, age:this.age }); }, del(i){ if(window.confirm('確認要刪除嗎？')){ this.people.splice(i,1); }else{ return; } }, sort(){ let len = this.people.length; for(var i=0;i<len;i++){ for(var j=0;j<len-i-1;j++){ if(Number(this.people[j]['age'])>Number(this.people[j+1]['age'])){ // 注意：在這裡用普通的元素交換時雖然people陣列改變但是並不會重新渲染，故要用Vue.set()方法來強制渲染 let temp = this.people[j]; Vue.set(this.people,j,this.people[j+1]); Vue.set(this.people,j+1,temp); } } } } } }); </script> </body> </html>