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(,)}}
带了两个参数
使用过滤器处理商品管理中日期的格式
定义了一个全局的过滤器之后得到效果：
定义的全局过滤器：
Vue.filter('formatDate',function(value){
if(!value)
return '';
if(value instanceof Date){
var d = value;
var y = d.getFullYear();
var m = d.getMonth()+;
var day =d.getDate()<?''+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：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品管理------创建页面与部分数据</title>
<script src="../js/vue.js"></script> <script>
Vue.filter('formatDate',function(value){ if(!value)
return ''; if(value instanceof Date){
var d = value;
var y = d.getFullYear();
var m = d.getMonth()+;
var day =d.getDate()<?''+d.getDate() : d.getDate();
var myDate = y+ '-' + m +'-'+day;
return myDate; }
else {
return value; } }); window .onload= () =>{
new Vue({
el:"#container",
data:{
imgUrl:'../res/images/',
imgName:'lovely.ico',
goods:{
id:'',
name:'',
price:'',
num:'',
type:''
},
goodsType:['零食','电子产品','生活用品'],
goodsArry:[
{id:'',name:'可乐',price:3.5,num:,type:'零食',addDate:'2019-3-13'},
{id:'',name:'GTX2080',price:,num:,type:'电子产品',addDate:'2019-3-14'},
{id:'',name:'牙刷',price:,num:,type:'生活用品',addDate:'2019-3-20'} ],
colNum:,
delArray:[]//删除选中的索引 },
methods:{
addGoods(){ this.goods.addDate = new Date ; this.goodsArry.push(this.goods);
this.goods={};
},
delGoods(index){ this.goodsArry.splice(index,);
},
clearGoodsArry(){ this.goodsArry=[];
},
delSelected(){ this.delArray.sort((a,b)=>{
return a-b;
}); console.log(this.delArray); for(var i=;i<this.delArray.length;i++)
{
this.goodsArry.splice(this.delArray[i]-i,);
}
this.delArray=[];
} }
});
}
</script>
<style>
#container{
margin: auto;
text-align: center;
width: 1000px;
border:2px solid gray;
} .header{ margin: 10px;
border: 1px solid gray;
} .header .title{ color: rgb(,,);
background: rgb(,,);
}
.sub_title{
background:rgb(,,);
color: rgb(,,);
font-size: 30px;
}
.form-warp{
margin: 10px;
padding-bottom: 10px;
border: 1px solid gray; }
.form-warp .content{ line-height: 35px;
} .form-warp input{
width: 150px;
height: 18px; } .form-warp select{
width: 154px;
height: 24px;
} .table-warp{
padding-bottom: 10px;
margin: 10px;
border: 1px solid gray;
}
.table-warp a{
text-decoration: none;
}
.table-warp th{
width: 80px;
color: #ffff;
background: rgb(,,);
} .logo
{
position: relative;
top: 12px;
}
.fontColor{ color: gray;
text-align: center;
} .clear-btn{
text-align: right;
padding-right: 10px;
} </style>
</head>
<body>
<div id="container"> <!--logo title-->
<div class="header">
<img :src="imgUrl+imgName" class="logo" height="80px" width="100px" />
<h1 class="title">商品管理</h1> </div> <!--输入部分input-->
<div class="form-warp">
<div class="sub_title">添加商品</div>
<div class="content"> 商品编号：<input type="text" placeholder="请输入商品编号" v-model="goods.id"/><br />
商品名称：<input type="text" placeholder="请输入商品名称" v-model="goods.name"/><br />
商品价格：<input type="text" placeholder="请输入商品价格" v-model="goods.price"/><br />
商品数量：<input type="text" placeholder="请输入商品数量" v-model="goods.num"/><br />
商品类型：<select v-model="goods.type"> <option value="" disabled="disabled">--请选择--</option>
<option v-for="type in goodsType">{{type}}</option> </select> </div>
<div class="form-btn">
<button @click="addGoods">确认添加</button>
<button @click="goods= { } ">重置信息</button> </div> </div>
<!--显示表格-->
<div class="table-warp">
<div :class="{fontColor:goodsArry.length<=0}" class="sub_title">商品列表</div>
<table border="" align="center"> <tr>
<th>序号</th>
<th>编号</th>
<th>名称</th>
<th>价格</th>
<th>数量</th>
<th>类型</th>
<th width="100px">入库日期</th> <th>删除</th>
<th>选择</th>
</tr>
<td :colspan="colNum" height="150px" v-show="goodsArry.length<=0">
暂无商品
</td> <tr v-for="(item,index) in goodsArry" :key="item.id">
<td>{{index}}</td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td style="display: flex;">
<a style="flex: 0.5;" href="#" @click.prevent="item.num=item.num--<=0?0:item.num--">-</a><!--style中的flex为了使其点击的范围扩大--> {{item.num}}
<a style="flex: 0.5;" href="#" @click.prevent="item.num++">+</a>
</td>
<td>{{item.type}}</td>
<td>{{item.addDate|formatDate}}</td>
<td>
<button @click="delGoods(index)">删除</button>
</td> <td>
<input type="checkbox" :value="index" v-model="delArray"/> </td>
</tr>
<!-- {{delArray}}-->
</table> <div class="clear-btn">
<a href="#" @click="delSelected" v-show="delArray.length>0" >删除选中</a>
<a href="#" @click="clearGoodsArry" v-show="goodsArry.length>0" >清空全部</a>
</div> </div> </div>
</body>
</html>
商品管理小案例
Vue小案例 之 商品管理------学习过滤器 使用过滤器处理日期的格式的更多相关文章
- Vue小案例 之 商品管理------修改商品数量以及增加入库日期属性
实现修改商品的数量: 加入的代码: css: .clear-btn{ text-align: right; padding-right: 10px; } .table-warp a{ text-dec ...
- Vue小案例 之 商品管理------批量删除与商品数量的调整
通过索引进行删除,进行测试,是否获取其索引: 测试效果: 测试代码,在vue中定义一个空的数组,以便后面进行数据的绑定: data:{ imgUrl:'../res/images/', imgName ...
- Vue小案例 之 商品管理------删除商品与提示
实现删除商品功能 根据索引来进行删除商品: 实现删除商品的HTML: <!--显示表格--> <div class="table-warp"> <di ...
- Vue小案例 之 商品管理------为之前的页面修改样式
最终修改的页面效果: 修改的css: <style> #container{ margin: auto; text-align: center; width: 1000px; border ...
- Vue小案例 之 商品管理------添加商品
进行添加button,以及商品列表的创建 html: <div class="form-btn"> <button>确认添加</button> ...
- Vue小案例 之 商品管理------创建页面与部分数据
logo的路径: 页面的初始布局: 初始的HTML: <div id="container"> <!--logo title--> <div clas ...
- Vue小案例（一）
案例需求: 创建一个品牌展示表格,表头有编号(id),品牌名称(name),创建时间(time)和操作,需要实现的功能是对数据的增删操作,和时间的格式化. 思路分析:在开发之前需要想清楚要用到Vue中 ...
- vue小案例--简易评论区
一.小案例(评论区) 1.流程 (1)分析静态页面.(vue项目创建参考https://www.cnblogs.com/l-y-h/p/11241503.html)(2)拆分静态页面,变成一个个组件. ...
- VUE小案例--简易计算器
这个小案例主要时练习v-model的使用,功能并不完善 <!DOCTYPE html> <html lang="zh-CN"> <head> & ...
随机推荐
- python字符串前面加u,r,b的含义
转自:https://blog.csdn.net/u010496169/article/details/70045895 u/U:表示unicode字符串 不是仅仅是针对中文, 可以针对任何的字符串, ...
- [LeetCode] 661. Image Smoother_Easy
Given a 2D integer matrix M representing the gray scale of an image, you need to design a smoother t ...
- 家庭记账本之微信小程序（一）
记得ppt中说到,可以制作为微信小程序或者是安卓的应用,但是在我了解后觉得小应用有点力不从心,所以还是从微信小程序开始吧,先让我们了解一下主要的东西 1.准备工作 IDE搭建2.知识准备从零开始app ...
- python timeit
//有时候,我们想知道一个函数的计算耗时,那么,你可以用timeit //test.py 1 import timeit 2 3 def func(): 4 s = 0 5 ...
- 转 EasyUi日期控件datebox设置，只显示年月，也只能选择年月
1.引入Jquery和easyui,注低版本的Jquery和easy不能使用,这里使用的Jquery是1.8.2easyui是1.6.1.1.easyui下载地址:http://www.jeasyui ...
- 获取 Google USB 驱动程序
获取 Google USB 驱动程序 另请参阅 安装 USB 驱动程序 使用硬件设备 使用任何 Google Nexus 设备进行 ADB 调试时,只有 Windows 需要 Google ...
- UVA 10256 The Great Divide(点在多边形内)
The Great Divid [题目链接]The Great Divid [题目类型]点在多边形内 &题解: 蓝书274, 感觉我的代码和刘汝佳的没啥区别,可是我的就是wa,所以贴一发刘汝佳 ...
- mysql字符集问题，及排序规则
字符集问题: 基本概念 • 字符(Character)是指人类语言中最小的表义符号.例如’A'.’B'等:• 给定一系列字符,对每个字符赋予一个数值,用数值来代表对应的字符,这一数值就是字符的编码(E ...
- DOS命令下映射虚拟磁盘（驱动器）
---恢复内容开始--- subst命令,用于路径替换,进入dos窗口,键入“subst /?”(t和/之间有空格),会看到关于subst的用法如下: C:\Users\Administrator&g ...
- git起步
关于版本控制 什么是版本控制?为什么要版本控制? 版本控制是记录文件内容变化,以便在将来查阅特定版本的系统.有了版本控制,我们就可以将某个文件或是整个项目回退到之前的某个时间段,查看现在和之前相比项目 ...