update

simple-demo/index.html

@@ -19,6 +19,17 @@
     <div class="col-md-12 col-md-offset-3">
         <h1>Vue demo</h1>
         <div>
+            <div class="row">
+                <div class="col-md-2" style="text-align: left;font-size: 16px;line-height: 30px;">
+                    查询：
+                </div>
+                <div class="col-md-5" style="text-align: left;">
+                    <label>
+                        <input type="text" class="form-control" v-model="search"></input>
+                    </label>
+                </div>
+                <button type="button" class="btn btn-success" @click="editBook(book)">新增</button>
+            </div>
             <table class="table table-hover ">
                 <br/>
                 <thead>
@@ -44,21 +55,6 @@
                 </tbody>
             </table>
             <div id="pageDiv"></div>
-
-            <!--  添加书籍   -->
-            <div id="add-book">
-                <!--查询输入框-->
-                <div class="row" style="margin-bottom: 30px;">
-                    <div class="col-md-4" style="text-align: left;font-size: 16px;line-height: 30px;">
-                        请输入查询书名：
-                    </div>
-                    <div class="col-md-5" style="text-align: left;">
-                        <label>
-                            <input type="text" class="form-control" v-model="search"></input>
-                        </label>
-                    </div>
-                </div>
-            </div>
         </div>
     </div>
 
@@ -104,28 +100,18 @@
 
 
 <script>
+    let initBook = {
+        id: 0,
+        author: '1',
+        name: '1',
+        price: '1'
+    }
     const vm = new Vue({
         el: "#app",
         // 计算函数 动态变化的数据
         data: {
-            initBook: {
-                id: 0,
-                author: '',
-                name: '',
-                price: ''
-            },
-            book: deepClone(this.initBook),
-            books: [{
-                id: 1,
-                author: '曹雪芹',
-                name: '红楼梦',
-                price: 36.00
-            }, {
-                id: 2,
-                author: '曹雪芹',
-                name: '三国演义',
-                price: 37.00
-            }],
+            book: deepClone(initBook),
+            books: [deepClone(initBook)],
             search: "",
             page: 1,
             pageSize: 10,