Vue小案例 之 商品管理------學習過濾器 使用過濾器處理日期的格式
阿新 • • 發佈：2019-04-15
microsoft borde btn 語法 添加 var clear ejs format 使用過濾器處理商品管理中日期的格式
代碼學習過濾器
過濾器介紹：過濾模型數據，在數據顯示前做預處理操作；
內置過濾器：在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 width: 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 width: 150px; 136 height: 18px; 137 138 } 139 140 .form-warp select{ 141 width: 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 width: 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>商品管理小案例
Vue小案例 之 商品管理------學習過濾器 使用過濾器處理日期的格式