2018-09-17
今天好像觉得是有点碌碌无为的一天，怎么说呢，还是踏踏实实的努力吧！=》》QAQ小明！！！
今天呢，学习了过滤器，官方给我们的解释是：Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。但是通俗地 来说，就是让要显示在页面上的内容进行重新筛选。
过滤器又分为两种：全局过滤器和局部过滤器。
①局部过滤器：
new Vue({
el:'',
data:{}
methods:{},
filters:{
过滤器名：function（data）{
}
})
②全局过滤器:
<p>{{msg|过滤器的名字}}</p>
new Vue({
})
Vue.filter('过滤器的名字'，function(){
}
QAQ:复习Js中的获取当前日期;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1></h1>
<script>
//toFixed(3)
//
var date=new Date();
console.log(date);
//年
var year=date.getFullYear();
//月
var mon=date.getMonth()+1;
//日
var tian=date.getDate();
//星期
var day=date.getDay();
//小时
var hours=date.getHours();
//分钟
var min=date.getMinutes();
//秒
var sec=date.getSeconds();
console.log(sec)
document.querySelector('h1').innerHTML='现在时间是'+year+'年'+mon+'
月'+tian+'日,星期'+day+','+hours+'点'+min+'分'+sec+'秒';
</script>
</body>
</html>
效果图：
date01.png
QAQ:数组的切割，翻转，拼接。=》》
var str = 'hello vue'
var strs = str.split(' '); //切割
console.log(strs);
var str1 = strs.reverse(); //翻转
console.log(str1);
var str2 = str1.join('==='); //拼接
console.log(str2);
数组API.png
QAQ:温故而知新，“数组的API”：
壹
~将数组转化成字符串=》》
1.Stiring()；
eg:var str=String(str);
//将数组转化为字符串并分隔每个元素;
QAQ: 注：不改变原数组。
2.join();
var str=arr.join("自定义分隔符"); 将数组转化为字符串，可定义分隔符强调：如果join省略"",就等效于String。
eg:var arr=[1,2,3];
arr.join('')//"123"
var arr=[1,2,3];
arr.join(' ')//"1 2 3"
var arr=[1,2,3];
arr.join(',')//"1,2,3"
arr//[1, 2, 3]
QAQ：注：不改变原数组。
贰
~链接和获取子数组
1.concat();
连接： var newArr=arr1.concat(值1,值2,arr2,...);将concat后的内容，和arr1拼接，组成新数组返回。
强调：concat的参数中包含数组，则打散数组，以单个元素拼接。
eg;var arr1=[1,2,3],arr2=[4,5,6]
arr1.concat(1,2)//[1, 2, 3, 1, 2]
var arr1=[1,2,3],arr2=[4,5,6]
arr1.concat(arr2)//[1, 2, 3, 4, 5, 6]
2.slice();
获取子数组：var subArr=arr.slice(starti,endi+1);
获得arr中starti位置开始，到endi位置的所有元素组成的新数组。
强调：含头不含尾。
省略第二个参数：表示从starti一直取到结尾。
可支持负数参数：-n表示倒数第n个元素，相当于length-n。
eg:var arr=[1,2,3,4]
arr.slice(0)//[1, 2, 3, 4]
arr.slice(0,2)//[1, 2]
arr.slice(-3)//[2, 3, 4]
arr.slice(-3,-1)//[2, 3]
arr.slice(0,2)//[1, 2]
arr//[1, 2, 3, 4]
QAQ:注：不改变原数组。
叁：
~删除，插入，替换：（直接修改原数组）。
1、删除：var deletes=arr.splice(starti,n);删除arr中starti位置开始的n个元素。返回被删除的元素组成的临时新数组。
eg:var arr=[1,2,3,4]
arr.splice(0)//[1, 2, 3, 4]
var arr=[1,2,3,4]
arr.splice(-1)//[4]
var arr=[1,2,3,4]
arr.splice(0,3)//[1, 2, 3]
arr//[4]
QAQ:注：1.支持负数。2.直接修改原数组。
2、插入：arr.splice(starti,0,值1,值2,...);
在arr中starti位置，插入新值。旧值被向后顺移。
强调：
1.要插入的值，只能以单独的参数传入，不支持打散数组参数。
2.starti表示第i个 不是数组索引。
eg:var arr=[1,2,3,4]
arr.splice(2,0,22,33)
arr//[1, 2, 22, 33, 3, 4]
3、替换：var deletes=arr.splice(starti,n,值1,值2,...);
删除arr中starti位置开始的n个元素，再在starti位置插入新元素。
删除的元素个数和插入的新元素个数不必相等。
eg:var arr=[1,2,3,4]
arr.splice(2,2,5,6)
arr//[1, 2, 5, 6]
4、反转数组元素：arr.reverse();
eg:arr=[1,2,3,4]
arr.reverse()//[4, 3, 2, 1]
arr//[4, 3, 2, 1]
注：直接修改原数组。
5、升序排列：arr.sort(); (直接修改原数组)。
eg:arr=[1,5,3,2]
arr.sort()//[1, 2, 3, 5]
arr=[1,5,32,2]
arr.sort()//[1, 2, 32, 5]
arr//[1, 2, 32, 5]
注：1.将arr中的元素，以字符串方式升序,如上
2.sort()支持自定义排序方法(arrayObject.sort(sortby))，这个以后再说啦~
陆
~结尾出入栈：
1、入栈：arr.push(值)；将值压入数组结尾。
eg:var arr=[1,2,3,4]
arr2=arr.push(1)//5
//返回新数组的长度
arr//[1, 2, 3, 4, 1]
2、出栈：var last=arr.pop(); 弹出数组最后一个元素。
eg：var arr=[1,2,3,4]
arr.pop()//4
//返回弹出的元素
arr//[1,2,3]
QAQ:注：直接修改原数组。
柒
~开头出入栈：
1、入栈：arr.unshift(值);
将值插入数组开头。
2、出栈：var first=arr.shift();
取出数组第一个元素。
var arr=[1,2,3,4]
arr.unshift(22)//5
arr//[22, 1, 2, 3, 4]
var arr=[1,2,3,4]
arr.shift()//1
arr//[2, 3, 4]
QAQ:注：直接修改原数组。
QAQ：总结：
直接修改原数组：
1.arr.splice();
2.arr.reverse();
3.arr.sort();
4.arr.push(值);arr.pop();
5.arr.unshift(值);arr.shift();
不修改原数组：
1.String(arr);
2.arr.join("自定义分隔符");
3.arr1.concat(值1,值2,arr2,...);
4.arr.slice(starti,endi+1);
小实例：
①保留小数（两位）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<p>{{123.41233|number}}</p>
</div>
<script src='js/vue.js'></script>
<script>
// Vue.filter("number",function(data){
// return data.toFixed(2)
// })
new Vue({
el:'#itany',
filters:{
number:function(data){
return data.toFixed(2)
}
}
})
</script>
</body>
</html>
②获取当前日期:与上面Js的对比=》》
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<p>{{new Date()|date}}</p>
</div>
<script src='js/vue.js'></script>
<script>
Vue.filter("date",function(data){
return data.getFullYear()+'年'+(data.getMonth()+1)+'月'+data.getDate()+'日,星期'+data.getDay()+','+data.getHours()+'点'+data.getMinutes()+'分'+data.getSeconds()+'秒';
})
new Vue({
el:'#itany'
})
</script>
</body>
</html>
效果图：
date02.png
③小于10，十位补位 0：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<p>{{2|addZero}}</p>
</div>
<script src='js/vue.js'></script>
<script>
Vue.filter('addZero',function(data){
if(data<10){
return '0'+data;
}else{
return data;
}
})
new Vue({
el:'#itany'
})
</script>
</body>
</html>
④计算属性1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<h1>{{msg.split(' ').reverse().join('===')}}</h1>
<a href="#">{{count}}</a>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
msg:'hello vue'
},
computed:{//计算属性
count:function(){
return this.msg.split(' ').reverse().join('===')
}
}
})
</script>
</body>
</html>
效果图：
计算属性1.png
⑤计算属性2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<button @click='add'>加货</button>
<h1>{{total}}</h1>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
package1:{price:2,count:3},
package2:{price:4,count:6}
},
computed:{
total:function(){
return this.package1.price*this.package1.count+this.package2.price*this.package2.count
}
},
methods:{
add:function(){
this.package1.count++;
}
}
})
</script>
</body>
</html>
效果图：
add01.png
add02.png
add03.png
网友评论