Vue小案例之商品管理------学习过滤器使用过滤器处理日期的格式

代码学习过滤器

过滤器介绍：过滤模型数据，在数据显示前做预处理操作；

内置过滤器：在1.x中，Vue提供了内置过滤器，但是在2.x中已经完全废除；

解决办法：

（1）使用第三方库来替代1.x中的内置过滤器；

（2）使用自定义过滤器；

自定义过滤器：

a.全局配置：Vue.filter( id, [definition] )

b. 局部配置：在Vue实例中配置filters

详细介绍网址：https://cn.vuejs.org/v2/api/#Vue-filter

过滤器语法：

无参：{{msg | filter}}

示例：

vue代码：

<script>
            
            
            window .onload= () =>{
                new Vue({
                el:"#one",
                data:{
                    msg:''
                    
                
                
                },
                methods:{
                    
                    
                },
                filters:{
                    UpperCase(value){
                        if(!value){
                            return '';
                        }
                        return value.toString().toUpperCase();
                    }
                }
            });
            }
        </script>

过滤器默认参数：会将msg中的属性传入

html:

<div id="one">
            <input type="text"  v-model="msg" /><br />
            小写转大写：{{msg|UpperCase}}
        
            
        
            
        </div>

2、带参：{{msg | filter(param)}}

示例：

使用了全局的配置过滤器：

Vue.filter('strSplit',function(value,start,end){
                if(!value){
                    return '';
                }
                console.log(value.toString().slice(start,end));
                return value.toString().slice(start,end);
                
                
                
            });

在data中定义变量msg1=‘ ’

HTML：

<input type="text"  v-model="msg1" /><br />
            截取字符：{{msg1|strSplit(1,3)}}

带了两个参数

使用过滤器处理商品管理中日期的格式

定义了一个全局的过滤器之后得到效果：

定义的全局过滤器：

Vue.filter('formatDate',function(value){
                
                if(!value)
                    return '';
                
                if(value instanceof Date){
                            var d = value;
                            var y = d.getFullYear();
                            var m = d.getMonth()+1;
                            var day =d.getDate()<10?'0'+d.getDate() : d.getDate();
                            var myDate = y+ '-' + m +'-'+day;
                            return myDate;
                    
                }
                else {
                    return value;
                    
                }
                
                
                         
            });

addGoods()方法也需要做出相应的改变：

addGoods(){
                             
                            
                            this.goods.addDate = new Date ;
                        
                        this.goodsArry.push(this.goods);
                        this.goods={};
                    },

HTML：

<td>{{item.addDate|formatDate}}</td>

当没有使用过滤器时的效果，其效果就没有日期格式的优化了，如图所示：

没有使用过滤器的HTML代码：

<td>{{item.addDate}}</td>

整个商品管理案例总的demo：

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>商品管理------创建页面与部分数据</title>
  6         <script src="../js/vue.js"></script>
  7         
  8         <script>
  9             Vue.filter('formatDate',function(value){
 10                 
 11                 if(!value)
 12                     return '';
 13                 
 14                 if(value instanceof Date){
 15                             var d = value;
 16                             var y = d.getFullYear();
 17                             var m = d.getMonth()+1;
 18                             var day =d.getDate()<10?'0'+d.getDate() : d.getDate();
 19                             var myDate = y+ '-' + m +'-'+day;
 20                             return myDate;
 21                     
 22                 }
 23                 else {
 24                     return value;
 25                     
 26                 }
 27                 
 28                 
 29                          
 30             });
 31             
 32             
 33             window .onload= () =>{
 34                 new Vue({
 35                 el:"#container",
 36                 data:{
 37                     imgUrl:'../res/images/',
 38                     imgName:'lovely.ico',
 39                     goods:{
 40                         id:'',
 41                         name:'',
 42                         price:'',
 43                         num:'',
 44                         type:''
 45                     },
 46                     goodsType:['零食','电子产品','生活用品'],
 47                     goodsArry:[
 48                     {id:'001',name:'可乐',price:3.5,num:10,type:'零食',addDate:'2019-3-13'},
 49                     {id:'002',name:'GTX2080',price:9999,num:20,type:'电子产品',addDate:'2019-3-14'},
 50                     {id:'003',name:'牙刷',price:5,num:30,type:'生活用品',addDate:'2019-3-20'}
 51                     
 52                     ],
 53                     colNum:8,
 54                     delArray:[]//删除选中的索引
 55                     
 56                     
 57                 
 58                 },
 59                 methods:{
 60                     addGoods(){
 61                              
 62                             
 63                             this.goods.addDate = new Date ;
 64                         
 65                         this.goodsArry.push(this.goods);
 66                         this.goods={};
 67                     },
 68                     delGoods(index){
 69                         
 70                         this.goodsArry.splice(index,1);
 71                     },
 72                     clearGoodsArry(){
 73 
 74 
 75                      this.goodsArry=[];
 76                      },
 77                      delSelected(){
 78                          
 79                          this.delArray.sort((a,b)=>{
 80                              return a-b;
 81                          });
 82                          
 83                          console.log(this.delArray);
 84                          
 85                          for(var i=0;i<this.delArray.length;i++)
 86                          {
 87                              this.goodsArry.splice(this.delArray[i]-i,1);
 88                          }
 89                          this.delArray=[];
 90                      }
 91                         
 92                     
 93                 }
 94             });
 95             }
 96         </script>
 97         <style>
 98             #container{
 99                 margin: 0 auto;
100                 text-align: center;
101                  1000px;
102                 border:2px solid gray;
103             }
104         
105           .header{
106 
107          margin: 10px;
108          border: 1px solid gray;
109           }
110 
111 
112       .header .title{
113 
114       color: rgb(53,73,93);
115     background: rgb(65,184,131);
116        }
117      .sub_title{
118       background:rgb(53,73,93);
119      color: rgb(65,184,131);
120      font-size: 30px;
121      }
122 .form-warp{
123    margin: 10px;
124    padding-bottom: 10px;
125   border: 1px solid gray;
126 
127 }
128 .form-warp .content{
129 
130 
131   line-height: 35px;
132 }
133 
134 .form-warp input{
135    150px;
136   height: 18px;
137 
138 }
139 
140         .form-warp select{
141      154px;
142     height: 24px;
143 }
144 
145    .table-warp{
146     padding-bottom: 10px;
147     margin: 10px;
148      border: 1px solid gray;
149 }
150  .table-warp a{
151  text-decoration: none;
152 }
153 .table-warp th{
154    80px;
155   color: #ffff;
156   background: rgb(53,73,93);
157 }
158 
159 .logo
160 {
161   position: relative;
162   top: 12px;
163 }
164 .fontColor{
165     
166     color: gray;
167     text-align: center;
168 }
169 
170 .clear-btn{
171   text-align: right;
172   padding-right: 10px;
173 }
174         
175         
176         </style>
177     </head>
178     <body>
179         <div id="container">
180             
181             <!--logo title-->
182             <div class="header">
183                 <img :src="imgUrl+imgName" class="logo"  height="80px"  width="100px"   />
184                 <h1 class="title">商品管理</h1>
185                 
186             </div>
187             
188             <!--输入部分input-->
189             <div  class="form-warp">
190                 <div class="sub_title">添加商品</div>
191                 <div class="content">
192                     
193                     商品编号：<input type="text" placeholder="请输入商品编号"  v-model="goods.id"/><br />
194                     商品名称：<input type="text" placeholder="请输入商品名称"  v-model="goods.name"/><br />
195                     商品价格：<input type="text" placeholder="请输入商品价格"  v-model="goods.price"/><br />
196                     商品数量：<input type="text" placeholder="请输入商品数量" v-model="goods.num"/><br />
197                     商品类型：<select v-model="goods.type">
198                         
199                         <option value="" disabled="disabled">--请选择--</option>
200                         <option v-for="type in goodsType">{{type}}</option>
201                         
202                     </select>
203                     
204             </div>
205             <div class="form-btn">
206                 <button @click="addGoods">确认添加</button>
207                 <button @click="goods= { } ">重置信息</button>
208                 
209                 
210                 
211             </div>
212                 
213     </div>
214     <!--显示表格-->
215     <div class="table-warp">
216         <div :class="{fontColor:goodsArry.length<=0}"   class="sub_title">商品列表</div>
217         <table border="1" align="center">
218             
219             <tr>
220                 <th>序号</th>
221                 <th>编号</th>
222                 <th>名称</th>
223                 <th>价格</th>
224                 <th>数量</th>
225                 <th>类型</th>
226                 <th width="100px">入库日期</th>
227                 
228                 <th>删除</th>
229                 <th>选择</th>
230             </tr>
231             <td :colspan="colNum" height="150px" v-show="goodsArry.length<=0">
232                 暂无商品
233             </td>
234             
235             <tr v-for="(item,index) in goodsArry" :key="item.id">
236                 <td>{{index}}</td>
237                 <td>{{item.id}}</td>
238                 <td>{{item.name}}</td>
239                 <td>{{item.price}}</td>
240                 <td style="display: flex;">
241                     <a style="flex: 0.5;"  href="#" @click.prevent="item.num=item.num--<=0?0:item.num--">-</a><!--style中的flex为了使其点击的范围扩大-->
242                     
243                     {{item.num}}
244                     <a style="flex: 0.5;"  href="#" @click.prevent="item.num++">+</a>
245                 </td>
246                 <td>{{item.type}}</td>
247                 <td>{{item.addDate|formatDate}}</td>
248                 <td>
249                     <button  @click="delGoods(index)">删除</button>
250                 </td>
251                 
252                 <td>
253                     <input type="checkbox" :value="index" v-model="delArray"/>
254                     
255                     
256                     
257                 </td>
258             </tr>
259     <!--    {{delArray}}-->
260         </table>
261         
262         
263         
264         
265         <div class="clear-btn">
266           <a href="#" @click="delSelected" v-show="delArray.length>0" >删除选中</a>
267           <a href="#" @click="clearGoodsArry" v-show="goodsArry.length>0" >清空全部</a>
268       </div>
269         
270       </div>
271       
272          
273             
274             
275             
276             </div>
277     </body>
278 </html>

商品管理小案例