1. 系统过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<script type="text/javascript" src="../vue1026.js"></script>
</head>
<body>
<div id="app">
<!-- 在vue2.0中已弃用系统过滤器但保留了自定义过滤器，自定义过滤器的用法和系统过滤器的用法一致 -->
<div>(0)原字符：{{text1}}</div>
<div>(1)系统过滤器capitalize-首字符大写：{{text1 | capitalize}}</div>
<div>(2)系统过滤器uppercase-小写转大写：{{text1 | uppercase}}</div>
<div>(3)系统过滤器lowercase-大写转小写：{{text1 | lowercase}}</div>
<div>(4)系统过滤器currency-数字转货币-默认美元：{{number1 | currency}}</div>
<div>(4)系统过滤器currency-数字转货币-过滤器加参数：{{number1 | currency '¥'}}</div>
<div>(5)系统过滤器pluralize-字符加后缀：{{text1}}{{text1 | pluralize '.png'}}</div>
<div>(6)系统过滤器-对象转json：{{list | json}}</div>
<div>(6)系统过滤器-对象转json同时小写转大写：{{list | json | uppercase}}</div>
<div>(7)系统过滤器-debounce：</div>
<div>(8)系统过滤器-limitBy：从开始位置开始显示几个</div>
<div v-for="item in list1 | limitBy 10">
<span>{{item}}</span>
</div>
<div>(8)系统过滤器-limitBy：从哪个位置开始显示几个</div>
<div v-for="item in list1 | limitBy 10 5">
<span>{{item}}</span>
</div>
<div>(9)系统过滤器-filterBy：参考案例的使用</div>
<div>(10)系统过滤器-orderBy：排序</div>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
text1:"aBc",
number1:654321,
list:[
{name:"小祁",age:18},
{name:"小卫",age:20}
],
list1:["火龙果","哈密瓜","猕猴桃","苹果","冬瓜","水蜜桃","圣女果","西瓜","黄桃","无花果","南瓜","樱桃","千禧果","北瓜","仙桃","黄瓜","冬枣","西红柿","龙眼","西柚"],
}
});
</script>
</html>
eg1：利用vue1.0中的系统过滤器filterBy实现列表按条件刷选查询
条件刷选.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<style type="text/css">
#title{
width: 800px;
margin: 20px auto;
}
#tb{
width: 800px;
border-collapse: collapse;
margin: 20px auto;
}
#tb th{
background-color: #0094ff;
color: white;
font-size: 16px;
padding: 5px;
text-align: center;
border: 1px solid black;
}
#tb td{
padding: 5px;
text-align: center;
border: 1px solid black;
}
</style>
<script type="text/javascript" src="../vue1026.js"></script>
</head>
<body>
<div id="app">
<div id="title">
<input type="text" placeholder="请输入编号" v-model="id">
<input type="text" placeholder="请输入名称" v-model="name">
<button @click="addData">添加</button>
<!-- 在vue1.0中有一个filterBy系统过滤器来实现按条件刷选数据,vue2.0中已弃用系统过滤器但保留了自定义过滤器 -->
<input type="text" placeholder="请输入名称关键字进行搜索" v-model="keyName">
</div>
<table id="tb">
<tr>
<th>编号</th>
<th>名称</th>
<th>创建时间</th>
<th>操作</th>
</tr>
<tr v-if="list.length == 0">
<td colspan="4">当前列表无数据</td>
</tr>
<!-- v-for的特点：当list发生改变时，vue.js会自动调用v-for重新生成数据，即自动完成数据刷新工作 -->
<tr v-for="item in list | filterBy keyName in 'name'">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.creatTime}}</td>
<!-- href="#"和href="javascript:void(0)"并未看出区别 -->
<td><a href="javascript:void(0)" @click="deleteData(item.id)">删除</a></td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
list:[
{id:1,name:"火龙果",creatTime:new Date()},
{id:2,name:"哈密瓜",creatTime:new Date()},
{id:3,name:"猕猴桃",creatTime:new Date()},
{id:4,name:"苹果",creatTime:new Date()},
{id:5,name:"冬瓜",creatTime:new Date()},
{id:6,name:"水蜜桃",creatTime:new Date()},
{id:7,name:"圣女果",creatTime:new Date()},
{id:8,name:"西瓜",creatTime:new Date()},
{id:9,name:"黄桃",creatTime:new Date()},
{id:10,name:"无花果",creatTime:new Date()},
{id:11,name:"南瓜",creatTime:new Date()},
{id:12,name:"樱桃",creatTime:new Date()},
{id:13,name:"千禧果",creatTime:new Date()},
{id:14,name:"北瓜",creatTime:new Date()},
{id:15,name:"仙桃",creatTime:new Date()},
{id:16,name:"黄瓜",creatTime:new Date()},
{id:17,name:"冬枣",creatTime:new Date()},
{id:18,name:"西红柿",creatTime:new Date()},
{id:19,name:"龙眼",creatTime:new Date()},
{id:20,name:"西柚",creatTime:new Date()}
],
id:"",
name:"",
keyName:""
},
methods:{
addData:function(){
if(this.id != "" && this.name != ""){
this.list.push({id:this.id,name:this.name,creatTime:new Date});
this.id = "";
this.name = "";
}else{
alert("编号或名称为空！")
}
},
deleteData:function(id){
if(!confirm("确认删除?")){
return;
}
//数组的findIndex(参数为一个回调函数)方法：根据id获取索引值
var index = this.list.findIndex(function(item){
return id == item.id;
});
//数组的splice(索引，个数)方法：从哪个位置删除几个元素
this.list.splice(index,1);
}
}
});
</script>
</html>
2. 自定义过滤器
2.1 自定义私有过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<script type="text/javascript" src="../vue1026.js"></script>
</head>
<body>
<span>区域1：</span>
<div id="app">
{{time}}
<br/>
{{time | dateFormat}}
</div>
<span>区域2：</span>
<!-- 私有过滤器在监管区域外不起作用 -->
<div id="app1">
{{time}}
<br/>
{{time | dateFormat}}
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
time:new Date()
},
//私有过滤器：在某一个Vue对象中定义的过滤器称为私有过滤器。私有过滤器只能在当前Vue对象的el指定的监管区域起作用。
filters:{
dateFormat:function(oldDate){
var newDate = "";
var year = oldDate.getFullYear();
var month = oldDate.getMonth()+1;
var day = oldDate.getDay();
newDate = year + "-" + month + "-" + day;
return newDate;
}
}
});
var vm1 = new Vue({
el:"#app1",
data:{
time:new Date()
}
});
</script>
</html>
2.1 自定义全局过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<script type="text/javascript" src="../vue1026.js"></script>
</head>
<body>
<span>区域1：</span>
<div id="app">
{{time}}
<br/>
{{time | dateFormat}}
</div>
<span>区域2：</span>
<div id="app1">
{{time}}
<br/>
{{time | dateFormat}}
</div>
</body>
<script type="text/javascript">
//定义全局过滤器(放在Vue实例化对象后为什么不起作用？)：Vue.filter(过滤器名称,过滤器的逻辑处理函数);
Vue.filter("dateFormat",function(oldDate){
var newDate = "";
var year = oldDate.getFullYear();
var month = oldDate.getMonth()+1;
var day = oldDate.getDay();
newDate = year + "-" + month + "-" + day;
return newDate;
});
var vm = new Vue({
el:"#app",
data:{
time:new Date()
}
});
var vm1 = new Vue({
el:"#app1",
data:{
time:new Date()
}
});
</script>
</html>
eg2：利用自定义过滤器实现日期格式化
日期格式化.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<style type="text/css">
#title{
width: 800px;
margin: 20px auto;
}
#tb{
width: 800px;
border-collapse: collapse;
margin: 20px auto;
}
#tb th{
background-color: #0094ff;
color: white;
font-size: 16px;
padding: 5px;
text-align: center;
border: 1px solid black;
}
#tb td{
padding: 5px;
text-align: center;
border: 1px solid black;
}
</style>
<script type="text/javascript" src="../vue1026.js"></script>
</head>
<body>
<div id="app">
<div id="title">
<input type="text" placeholder="请输入编号" v-model="id">
<input type="text" placeholder="请输入名称" v-model="name">
<button @click="addData">添加</button>
<!-- 在vue1.0中有一个filterBy系统过滤器来实现按条件刷选数据,vue2.0中已弃用系统过滤器但保留了自定义过滤器 -->
<input type="text" placeholder="请输入名称关键字进行搜索" v-model="keyName">
</div>
<table id="tb">
<tr>
<th>编号</th>
<th>名称</th>
<th>创建时间</th>
<th>操作</th>
</tr>
<tr v-if="list.length == 0">
<td colspan="4">当前列表无数据</td>
</tr>
<!-- v-for的特点：当list发生改变时，vue.js会自动调用v-for重新生成数据，即自动完成数据刷新工作 -->
<tr v-for="item in list | filterBy keyName in 'name'">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<!-- 在vue2.0中过滤器与参数间的空格改为括号，即：{{item.creatTime | dateFormat('yy-MM-dd HH:mm:ss')}} -->
<td>{{item.creatTime | dateFormat 'yy-MM-dd HH:mm:ss'}}</td>
<!-- href="#"和href="javascript:void(0)"并未看出区别 -->
<td><a href="javascript:void(0)" @click="deleteData(item.id)">删除</a></td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
Vue.filter("dateFormat",function(oldDate,formatString){
var newDate = "";
var year = oldDate.getFullYear();
var month = oldDate.getMonth()+1;
var day = oldDate.getDay();
if(formatString == "yy-MM-dd"){
newDate = year + "-" + month + "-" + day;
}else{
newDate = year + "-" + month + "-" + day + " 16:21:13";
}
return newDate;
});
var vm = new Vue({
el:"#app",
data:{
list:[
{id:1,name:"火龙果",creatTime:new Date()},
{id:2,name:"哈密瓜",creatTime:new Date()},
{id:3,name:"猕猴桃",creatTime:new Date()},
{id:4,name:"苹果",creatTime:new Date()},
{id:5,name:"冬瓜",creatTime:new Date()},
{id:6,name:"水蜜桃",creatTime:new Date()},
{id:7,name:"圣女果",creatTime:new Date()},
{id:8,name:"西瓜",creatTime:new Date()},
{id:9,name:"黄桃",creatTime:new Date()},
{id:10,name:"无花果",creatTime:new Date()},
{id:11,name:"南瓜",creatTime:new Date()},
{id:12,name:"樱桃",creatTime:new Date()},
{id:13,name:"千禧果",creatTime:new Date()},
{id:14,name:"北瓜",creatTime:new Date()},
{id:15,name:"仙桃",creatTime:new Date()},
{id:16,name:"黄瓜",creatTime:new Date()},
{id:17,name:"冬枣",creatTime:new Date()},
{id:18,name:"西红柿",creatTime:new Date()},
{id:19,name:"龙眼",creatTime:new Date()},
{id:20,name:"西柚",creatTime:new Date()}
],
id:"",
name:"",
keyName:""
},
methods:{
addData:function(){
if(this.id != "" && this.name != ""){
this.list.push({id:this.id,name:this.name,creatTime:new Date});
this.id = "";
this.name = "";
}else{
alert("编号或名称为空！")
}
},
deleteData:function(id){
if(!confirm("确认删除?")){
return;
}
//数组的findIndex(参数为一个回调函数)方法：根据id获取索引值
var index = this.list.findIndex(function(item){
return id == item.id;
});
//数组的splice(索引，个数)方法：从哪个位置删除几个元素
this.list.splice(index,1);
}
}
});
</script>
</html>
