Bootstrap+Vue.js 深度理解雙向綁定

實例是v-model指令的雙向綁定  基於（Bootstrap+Vue.js）實現的。

Bootstrap是基於HTML、CSS、JavaScript 開發的簡潔、直觀、強悍的前端開發框架，使得 Web 開發更加快捷。

<div class="container">
    <!--表單 -->
    <form rele="form">
        <div class="form-group">
            <label for="username">用戶名：</label>
            <input type="text" placeholder="輸入用戶名" value=""  v-model="username"  class="form-control"/>
        </div>
        <div class="form-group">
            <label for="age">年齡：</label>
            <input type="text" placeholder="輸入年齡"   value=""  v-model="age"  class="form-control"/>
        </div>
        <div class="form-group">
            <input type="button" value="添加" v-on:click="add()"  class="btn btn-primary"/>
            <input type="reset"  value="重置"  class="btn btn-danger"/>
        </div>
    </form>
    <hr style="border-bottom:1px solid black;"/>
    <!--表格 -->
    <table class="table table-bordered">
        <caption class="h2 text-danger">用戶信息表</caption>
        <tr>
            <th class="text-center">序號</th>
            <th class="text-center">名字</th>
            <th class="text-center">年齡</th>
            <th class="text-center">操作</th>
        </tr>
        <tr class="text-center" v-for="(item,index) in myData">
            <td>{{index}}</td>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>
                <button  class="btn btn-primary btn-sm"  data-toggle="modal" data-target="#layer"  v-on:click="click(index)"/>刪除</button>
                <button  class="btn btn-primary btn-sm"  data-toggle="modal" data-target="#update" v-on:click="modify(index)" style="margin-left:10%;"/>修改</button>
            </td>
        </tr>
        <tr class="text-right" v-show="myData.length!=0">
            <td colspan="4"><button  class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer" v-on:click="click(123)"/>全部刪除</button></td>
        </tr>
        <tr class="text-center" v-show="myData.length==0">
            <td colspan="4"><p>暫無數據....</p></td>
        </tr>
    </table>
    <!--模態框 -->
    <div role="dialog" class="modal fade"  id="layer">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times</span>
                    </button>
                    <h4>確認刪除么?</h4>
                </div>
                <div class="modal-body text-right">
                    <button class="btn btn-primary btn-sm" data-dismiss="modal">取消</button>
                    <button class="btn btn-primary btn-sm" data-dismiss="modal" @click="deletes()">確認</button>
                </div>
            </div>
        </div>
   </div>
   <div role="dialog" class="modal fade"  id="update">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times</span>
                    </button>
                    <h4>確認修改么?</h4>
                    <form rele="form">
                        <div class="form-group">
                            <label for="username">用戶名：</label>
                            <input type="text" placeholder="輸入用戶名"  v-model="updatename"   id="username" class="form-control"/>
                        </div>
                        <div class="form-group">
                            <label for="age">年齡：</label>
                            <input type="text" placeholder="輸入年齡"    v-model="updateage"      id="age" class="form-control"/>
                        </div>
                        <div class="form-group">
                            <input type="button" value="修改" data-dismiss="modal" v-on:click="update()"  class="btn btn-primary"/>
                            <input type="reset"  value="重置" class="btn btn-danger"/>
                        </div>
                    </form>
                </div>
                <div class="modal-body text-right">
                    <button class="btn btn-primary btn-sm" data-dismiss="modal">取消</button>
                    <button class="btn btn-primary btn-sm" data-dismiss="modal" @click="update()">確認</button>
                </div>
            </div>
        </div>
   </div>
</div>
<script>
window.onload=function(){
    var app=new Vue({
            el:'.container',
            data:{
               myData:[{'name':'y','age':'18'}],
               username:'',
               age:'',
               nowIndex:-100,
               updatename:'',
               updateage:''
            },
            methods:{
　　　　　　　　　　//添加
                add:function(){
                    this.myData.push({name:this.username,age:this.age});
                    this.username="";
                    this.age="";
                },
                click:function(index){
                    this.nowIndex=index;
                },
                modify:function(index){
                    this.nowIndex=index;
                    this.updatename=this.myData[this.nowIndex].name;
                    this.updateage=this.myData[this.nowIndex].age;
                },
　　　　　　　　　　//刪除
                deletes:function(){
                    if(this.nowIndex==123){
                        this.myData=[];
                    }else{
                        this.myData.splice(this.nowIndex,1);
                    }
                },
　　　　　　　　　　//更新
                update:function(){
                    this.myData[this.nowIndex].name=this.updatename;
                    this.myData[this.nowIndex].age=this.updateage;
                    this.updatename="";
                    this.updateage="";
                }
            }
        })
    }
</script>

功能上並不復雜，實例可以更好的理解v-model雙向綁定，實例功能上還可以擴展更多