<div id="vuefrom">
    <fieldset>
        <legend>员工查询</legend>
        <form fajax="#list">
            <label>姓名<input type="text" id="name" v-model="filter.Name" /></label>
            <button type="button" v-on:click="search">查询</button>
        </form>
    </fieldset>
    <div id="list" v-if="list.length > 0">
        <table class="table">
            <thead>
                <tr>
                    <td>编号</td>
                    <td>姓名</td>
                    <td>身份证号码</td>
                    <td>性别</td>
                    <td>生日</td>
                    <td>年龄</td>
                    <td>电话</td>
                    <td>婚史</td>
                    <td>教育</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="i in list">
                    <td>{{i.Id}}</td>
                    <td>{{i.Name}}</td>
                    <td>{{i.CardNo}}</td>
                    <td>{{i.Gender | cgGender}}</td>
                    <td>{{i.Birthday | dateFormat}}</td>
                    <td>{{i.Birthday | getAge}}</td>
                    <td>{{i.PhoneNo}}</td>
                    <td>{{i.Marriage | cgMarriage}}</td>
                    <td>{{i.Education | cgEducation}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: "#vuefrom",
        data: {
            filter: {
                Name: "",
            },
            list: {

            }
        },
        created() {
        },
        methods: {
            search() {
                $.getJSON("/api/Person/GetPeople", vm.filter, function (d) {
                    vm.list = d;
                });
            }
        },
        computed: {
        }
    });
</script>