过滤器

1.过滤器:让要在显示在页面上的内容进行重新筛选

包括两种类型: 全局过滤器和局部过滤器

全局过滤器:JS分为两个部分,一个是Vue.filter('过滤器的名字’,function(){}),另一个是new Vue({el:‘id名或class名’,data:{})

局部过滤器:JS只有一部分new Vue({el:‘id名或class名’,data:{},methods:{},filters:{过滤器名字:function(){}}})

格式:JS和HTML

例子;
效果1:让单位数变为两位




    
    Document


   

{{2|addZero}}

效果2:保留两位小数




    
    Document


   

{{123.41233|number}}




    
    Document


   

{{s|sm}}

保留两位小数:toFixed(n)可以进行四舍五入n表示保留几位小数

var num=123.456
 console.log(num.toFixed(2));
    ````
效果3:显示当前时间





Document



{{new Date()|date}}






`````

知识点:

    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+'秒'; 

2.计算属性:计算属性关键词computed。

含义:模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。
计算属性的用法:在一个计算属性里可以完成各种复杂的逻辑,包括运算、函数调用等,只要最终返回一个结果就可以。
例子:
效果1;




    
    Document


   

{{msg.split(' ').reverse().join('===')}}

//这里的表达式包含3个操作,并不是很清晰,所以遇到复杂逻辑时应该使用Vue特带的计算属性computed来进行处理。 {{count}}

知识点:

    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);

效果2:简单计算




    
    Document


  

{{total}}

3.数组API:

(1)string(); 把数组转换成字符串

例:

var  arr=[1,2,3,4,5];

        var    str=String(arr);

        console.log(str);
//1,2,3,4,5

(2)join() 方法将数组(或一个类数组对象)的所有元素连接到一个字符串中,不会改变数组
例:

var  arr['h','e',l'',''l,'o'];

        var  str=arr.join('-');//h-e-l-l-o

        var  str=arr.join('');//hello

        var  str=arr.join(' ');//h,e,l,l,o

        console.log(str);

(3)concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。
用法:
var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])
例:

①var  arr=['a','b','c'];

      var  str=arr.concat(1,2);              console.log(str);//['a','b','c',1,2]

      ②var  arr=['a','b','c'];

      var  arr2=[1,2,3];

      var  str=arr.concat(arr2);              console.log(str);//['a','b','c',1,2,3]

```
(4)slice() 方法返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组对象。原始数组不会被修改。
slice(starti,endi+1); 截取

特点:

①含头不含尾

②如果省略第二个参数,默认从starli开始截取到结尾

③如果一个参数都不写,相当于复制原素组

④支持负数参数

例:
```
var arr=['a','b','c','d','e','f','g'];

//下标            0  1  2  3  4  5  6

//                  -7  -6  -5 -4 -3 -2 -1

var  arr.slice(3,5);[//'d',''e];

var  arr.slice(3);//['d','e','f','g'];

var  arr.slice();//['a','b','c','d','e','f','g'];

var  arr.slice(-4,-2);//['d','e'];       

console.log(str)  ;

(5)splice(starti,n); (n代表个数)
例:
var arr=['a','b','c','d','e','f','g'];
①删除
var str=arr.splice(3,2);
consolie.lig(arr);//['a','b','c','f','g'];
②插入
var str=arr.splice(3,0,'1','2');
consolie.lig(arr);//['a','b','c','1','2','d','e','f','g'];
③替换
var str=arr.splice(3,2,'A','B');
consolie.lig(arr);//['a','b','c','A','B','f','g'];

(6)reverse(); 翻转

例:

        var  arr=[1,2,3,4,5];

        var    str=arr.reverse();

        console.log(str);//[5,4,3,2,1]

(7)push() 方法将一个或多个元素添加到数组的末尾,并返回数组的新长度。给数组末
尾添加元素

例:

        var  arr=[1,2,3,4,5];

        var    str=arr.push('a');

        console.log(arr);//[1,2,3,4,5,'a']

(8)pop()方法从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度。
使用:
arr.pop()
注意:
如果你在一个空数组上调用 pop(),它返回 undefined。
例:

var  arr=[1,2,3,4,5];

        var    str=arr.pop();

        console.log(arr);//[1,2,3,4]

(9)unshift() 方法将一个或多个元素添加到数组的开头,并返回新数组的长度。
例:

var  arr=[1,2,3,4];

        var    str=arr.unshift('fff');

        console.log(arr);//['fff',1,2,3,4]
```

(10)shift() 方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。
 注意:
shift 方法移除索引为 0 的元素(即第一个元素),并返回被移除的元素,其他元素的索引值随之减 1。如果 length 属性的值为 0 (长度为 0),则返回 undefined。
 例:
````
var  arr=[1,2,3,4];

        var    str=arr.shift();

        console.log(arr);//[2,3,4]

你可能感兴趣的:(过滤器)