<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="widtd=device-widtd, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/static/css/css.css">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/vue-2.4.0.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- navbar-default这个类是设置导航栏 -->
        <div class="navbar navbar-default">
            <div class="container">
                <!-- navbar-header用于设置内容横向显示 -->
                <div class="navbar-header">
                    <a href="/index.html" class="navbar-brand"></a>
                </div>
                <!-- navbar-nav用来设置横向显示 -->
                <!-- navbar-right用来设置右浮动 -->
                <!-- hidden-xs用于当屏幕很小的情况下隐藏div里面的内容 -->
                <div class="hidden-xs">
                    <ul class="nav navbar-nav">
                        <li class="dropdown">
                            <!--订单一览表-->
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                订单一览表
                                <b class="caret"></b>
                            </a>
                            <ul class="nav dropdown-menu">
                                <li><a href="#">订单一览表</a></li>
                                <li><a href="#">已结案订单</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <!--月度产能评估表-->
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                月度产能评估表
                                <b class="caret"></b>
                            </a>
                            <ul class="nav dropdown-menu">
                                <li><a href="#">汇总分析</a></li>
                                <li><a href="#">订单完成情况</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <!--月度主排程计划-->
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                月度主排程计划
                                <b class="caret"></b>
                            </a>
                            <ul class="nav dropdown-menu">
                                <li><a href="#">计划主交期</a></li>
                                <li><a href="#">计划部门交期</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--搜索-->
        <div class="panel filter">
            <div class="container">
                asda
            </div>
        </div>
        <!-- 内容 -->
        <!-- container这个类是设置居中对齐 -->
        <div class="container">
            <!-- row这个类是用于设置取消内边距 -->
            <label>
                          Id:
                          <input type="text" v-model="id">
                        </label>

                    <label>
                          Name:
                          <input type="text" v-model="name">
                        </label>

                    <input type="button" value="添加" @click="add()">

                    <label>
                          搜索名称关键字：
                          <input type="text"  v-model="keywords">
                        </label>
            <table class="table table-bordered table-hover table-striped">
                <thead>
                    <tr>
                        <th>id</th>
                        <th>名字</th>
                        <th>时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in list" :key="item.id">
                        <td v-text="item.id"></td>
                        <td v-text="item.name"></td>
                        <td v-text="item.ctime"></td>
                        <th><a href="" @click.prevent="del(item.id)">删除</a></th>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="footer" v-text="cc">
            这是分页{{cc}}
        </div>
    </div>
    <script>
        //创建vue实际，得到View Model实例
        var vm = new Vue({
            el: '#app',
            data: {
                id: '',
                name: '',
                keywords: '',
                cc: 'asd',
                list: [
                    { id: 1, name: '奔驰', ctime: new Date() },
                    { id: 2, name: '宝马', ctime: new Date() },
                    { id: 3, name: '宝马', ctime: new Date() },
                    { id: 4, name: '宝马', ctime: new Date() }
                ]
            },
            // metdods: {
            //     //添加数据的方法{}
            //     add() {
            //         console.log('ok')
            //     }
            // }
            methods: {
                add() { // 添加的方法
                    console.log('ok')
                    // 添加一个对象用于增加数据
                    var car = {id:this.id,name:this.name}
                    console.log(car)
                    this.list.push(car)
                    // 情况本文框输入的值
                    this.id=this.name=''
                },
                del(id){
                    console.log('ok1')
                    this.list.some((item,i) =>{
                        if(item.id == id){
                            this.list.splice(i,1)
                        }
                    })
                }
            }
        });
    </script>
</body>

</html>