vue实现商品列表的添加删除

Posted 2020-11-28 sxdpanda

 1 <div id="app">
 2 <div class="container"><form class="form-inline">
 3 <div class="form-group"><label for="exampleInputName2">ID：</label> <input id="exampleInputName2" class="form-control" type="text" /></div>
 4 <div class="form-group"><label for="exampleInputEmail2">Name：</label> <input class="form-control" type="text" /></div>
 5 <button class="btn btn-primary" type="button">提交</button></form>
 6 <table class="table table-hover table-striped">
 7 <tbody>
 8 <tr>
 9 <td>ID</td>
10 <td>品牌名称</td>
11 <td>添加时间</td>
12 <td>操作</td>
13 </tr>
14 <tr>
15 <td>{{item.id}}</td>
16 <td>{{item.pp_name}}</td>
17 <td>{{item.add_time | getTime()}}</td>
18 <td><a>删除</a></td>
19 </tr>
20 </tbody>
21 </table>
22 </div>
23 </div>
24 <script type="text/javascript">// <![CDATA[
25 var app = new Vue({
26 el: ‘#app‘,
27 data: {
28 id : ‘‘,
29 name : ‘‘,
30 list : [
31 {id : 1, pp_name : ‘安踏‘, add_time : new Date()},
32 {id : 2, pp_name : ‘李宁‘, add_time : new Date()},
33 {id : 3, pp_name : ‘捷豹‘, add_time : new Date()},
34 {id : 4, pp_name : ‘悍马‘, add_time : new Date()}
35 ]
36 },
37 methods: {
38 add : function(){
39 // 数据插入数组操作
40 this.list.push({id : this.id, pp_name : this.name, add_time : new Date()});
41 this.id = this.name = ‘‘
42 },
43 
44 /* 
45 根据id删除数据
46 
47 分析： 先要找到这一项数据的id，然后根据id删除索引
48 找到索引之后直接调用数组的splice方法
49 */
50 del : function(id){
51 this.list.some((item,i) =>{
52 if(item.id === id){
53 this.list.splice(i,1);
54 
55 // 在数组some中 如果返回值为true，则会立即终止后续的循环
56 return true;
57 }
58 })
59 }
60 },
61 // 时间的过滤
62 filters:{
63 getTime:function(value){
64 let date = new Date(value),
65 Y = date.getFullYear(),
66 m = date.getMonth() + 1,
67 d = date.getDate(),
68 h = date.getHours(),
69 min = date.getMinutes(),
70 s = date.getSeconds();
71 if(m<10){m = ‘0‘ +m;}
72 if(d<10){d = ‘0‘ +d;}
73 if(h<10){h = ‘0‘ +h;}
74 if(min<10){min = ‘0‘ +min;}
75 if(s<10){s = ‘0‘ +s;}
76 
77 let t = Y + ‘-‘ + m + ‘-‘ + d + ‘ | ‘ + h + ‘:‘ + min + ‘:‘ + s;
78 return t;
79 }
80 }
81 
82 })
83 
84 // ]]></script>

2020-05-13