一个Vue实例-添加、显示列表、删除

<link href="~/Content/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="~/Content/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/Content/js/jquery-1.8.2.min.js"></script>
<script src="~/Content/js/bootstrap.min.js"></script>
<script src="~/Scripts/vue.min.js"> </script>
<style>

</style>

<div class="container" id="app">
    <form v-on:submit.prevent="add">
        <div class="form-group">
            <label>
                姓名
                <input placeholder="姓名" class="form-control" v-model="name" />
            </label>
        </div>
        <div class="form-group">
            <label>
                年龄
                <input placeholder="年龄" class="form-control" v-model.number="age" />
            </label>
        </div>
        <button type="submit" class="btn btn-primary">提交</button>
        <button type="reset" class="btn btn-default">重置</button>

        <table class="table table-bordered table-hover">
            <tr class="text-center text-success">
                <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 ,i) in list">
                <td>{{i+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td><button class="btn btn-danger" type="button" data-toggle="modal" data-target="#myModal" v-on:click="nowIndex=i">删除</button></td>
            </tr>
            <tr class="text-center" v-show="list.length>0">
                <td colspan="4">
                    <button class="btn btn-danger" type="button" data-toggle="modal" data-target="#myModal" v-on:click="nowIndex=-1">删除全部</button>
                </td>
            </tr>
            <tr v-show="list.length==0">
                <td colspan="4" class="text-center text-muted">
                    <p>暂无信息</p>
                </td>
            </tr>
        </table>
    </form>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="delok(nowIndex)">确定</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            name:"",
            age: "",
            nowIndex:"",
            list: [{
                name: "张三", age: 22
            },
            {
                name: "李四", age: 12
            }, ],
          
        },
        methods:{
            add: function () {
                this.list.push({ name: this.name, age: this.age });
                this.name = this.age = "";
            },
            delok: function (n) {
                if (n ==-1) {
                    this.list = [];
                } else {
                    this.list.splice(n, 1);
                }
            }
            
        }
    })
</script>