Vue之图书管理案例

 

 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8     <title>图书管理</title>
  9     <style type="text/css">
 10         .grid {
 11             margin: auto;
 12             width: 530px;
 13             text-align: center;
 14         }
 15 
 16         .grid table {
 17             border-top: 1px solid #C2D89A;
 18             width: 100%;
 19             border-collapse: collapse;
 20         }
 21 
 22         .grid th,
 23         td {
 24             padding: 10;
 25             border: 1px dashed #F3DCAB;
 26             height: 35px;
 27             line-height: 35px;
 28         }
 29 
 30         .grid th {
 31             background-color: #F3DCAB;
 32         }
 33 
 34         .grid .book {
 35             padding-bottom: 10px;
 36             padding-top: 5px;
 37             background-color: #F3DCAB;
 38         }
 39     </style>
 40 </head>
 41 
 42 <body>
 43     <div id="app">
 44         <div class="grid">
 45             <div>
 46                 <h1>图书管理</h1>
 47                 <div class="book">
 48                     <div>
 49                         <label for="id">
 50                             编号
 51                         </label>
 52                         <input type="text" id="id" v-model='id' :disabled="flag" v-focus>
 53                         <label for="name">
 54                             名称
 55                         </label>
 56                         <input type="text" id="name" v-model='name'>
 57                         <button @click='handle' :disabled="submitFlag">提交</button>
 58                     </div>
 59                 </div>
 60             </div>
 61             <div class="total">
 62                 <span>图书总数:</span>
 63                 <span>{{total}}</span>
 64             </div>
 65             <table>
 66                 <thead>
 67                     <tr>
 68                         <th>编号</th>
 69                         <th>名称</th>
 70                         <th>时间</th>
 71                         <th>操作</th>
 72                     </tr>
 73                 </thead>
 74                 <tbody>
 75                     <tr v-for='item in books' :key='item.id'>
 76                         <td>{{item.id}}</td>
 77                         <td>{{item.name}}</td>
 78                         <td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</td>
 79                         <td>
 80                             <a href="" @click.prevent='toEdit(item.id)'>修改</a>
 81                             <span>|</span>
 82                             <a href="" @click.prevent='deleteBook(item.id)'>删除</a>
 83                         </td>
 84                     </tr>
 85                 </tbody>
 86             </table>
 87         </div>
 88     </div>
 89 </body>
 90 <script type="text/javascript" src="js/vue.js"></script>
 91 <script>
 92     // 通过Vue.directive 自定义指定
 93     Vue.directive('focus', {
 94         inserted: function (el) {
 95             el.focus();
 96         }
 97     });
 98     Vue.filter('format', function (value, arg) {
 99         function dateFormat(date, format) {
100             if (typeof date === "string") {
101                 var mts = date.match(/(\/Date\((\d+)\)\/)/);
102                 if (mts && mts.length >= 3) {
103                     date = parseInt(mts[2]);
104                 }
105             }
106             date = new Date(date);
107             if (!date || date.toUTCString() == "Invalid Date") {
108                 return "";
109             }
110             var map = {
111                 "M": date.getMonth() + 1, //月份 
112                 "d": date.getDate(), //日 
113                 "h": date.getHours(), //小时 
114                 "m": date.getMinutes(), //分 
115                 "s": date.getSeconds(), //秒 
116                 "q": Math.floor((date.getMonth() + 3) / 3), //季度 
117                 "S": date.getMilliseconds() //毫秒 
118             };
119             format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
120                 var v = map[t];
121                 if (v !== undefined) {
122                     if (all.length > 1) {
123                         v = '0' + v;
124                         v = v.substr(v.length - 2);
125                     }
126                     return v;
127                 } else if (t === 'y') {
128                     return (date.getFullYear() + '').substr(4 - all.length);
129                 }
130                 return all;
131             });
132             return format;
133         }
134         return dateFormat(value, arg);
135     })
136     var vm = new Vue({
137         el: '#app',
138         data: {
139             flag: false,
140             submitFlag: false,
141             id: '',
142             name: '',
143             books: []
144         },
145         methods: {
146             handle: function () {
147                 if (this.flag) {
148                     //编辑图书
149                     this.books.some((item) => {
150                         if (item.id == this.id) {
151                             item.name = this.name;
152                             return true;
153                         }
154                     });
155                     this.flag = false;
156                 } else {
157                     // 添加图书
158                     var book = {};
159                     book.id = this.id;
160                     book.name = this.name;
161                     book.date = 2525609975000;
162                     this.books.push(book);
163                     // 清空表单
164                     this.id = '';
165                     this.name = '';
166                 }
167                 // 清空表单
168                 this.id = '';
169                 this.name = '';
170 
171             },
172             toEdit: function (id) {
173                 //禁止修改ID
174                 this.flag = true;
175                 console.log(id)
176                 //根据ID查询出要编辑的数据
177                 var book = this.books.filter((item) => {
178                     return item.id == id;
179                 });
180                 console.log(book)
181                 //把获取的信息填充到表单
182                 this.id = book[0].id;
183                 this.name = book[0].name;
184             },
185             deleteBook: function (id) {
186                 //删除图书
187                 var index = this.books.findIndex((item) => {
188                     return item.id == id;
189                 });
190                 console.log(index);
191                 //根据索引删除数组元素
192                 this.books.splice(index, 1);
193             }
194 
195         },
196         //计算属性
197         computed: {
198             total: function () {
199                 //计算图书总数
200                 return this.books.length;
201             }
202         },
203         watch: {
204             name: function (val) {
205                 //验证图书名称是否存在
206                 var flag = this.books.some(function (item) {
207                     return item.name == val;
208                 });
209                 if (flag) {
210                     //图书名存在
211                     this.submitFlag = true;
212                 } else {
213                     this.submitFlag = false;
214                 }
215             }
216         },
217         mounted: function () {
218             //该生命周期钩子函数被触发的时候,该模板已经可以使用
219             //一般此时用于获取后台数据,然后把数据填充到模板
220             var data = [{
221                 id: 1,
222                 name: "三国演义",
223                 date: 2525609975000
224             }, {
225                 id: 2,
226                 name: "水浒传",
227                 date: 2525609975000
228             }, {
229                 id: 3,
230                 name: "红楼梦",
231                 date: 2525609975000
232             }];
233             this.books = data;
234         }
235     });
236 </script>
237 
238 </html>

 

posted @ 2021-09-08 23:01  丁帅帅dss  阅读(87)  评论(0)    收藏  举报