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双向绑定，实例功能上还可以扩展更多