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

二.分为：

（1）全局过滤器

<!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>

(2) 局部过滤器

<!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>
       new Vue({
            el:'#itany',
            filters:{
                number:function(data){
                    return data.toFixed(2)
                }
            }
       })
    </script>
</body>
</html>

三.实例

日期

<!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>

四.计算属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="name">
            <p>{{msg.split(" ").reverse().join("+++")}}</p>
            <h1>{{count}}</h1>
        </div>
        <script src="js/vue.js"></script>
        <script>
            new Vue({
                el:"#name",
                data:{
                    msg:"h e l l o v u e"
                },
                computed:{
                    count:function(){
                    return this.msg.split(" ").reverse().join("===")
                    }
                }
            })
        </script>
    </body>
</html>

五.计算属性求和

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="name">
            <button v-on:click="add">加货</button>
            <h2>总价为{{aa}}</h2>
        </div>
        <script src="js/vue.js"></script>
        <script>
            new Vue({
                el:"#name",
                data:{
                    pag:{price:2,count:3},
                    pag1:{price:3,count:5},
                },
                computed:{
                    aa:function(){
                        return this.pag.price*this.pag.count+this.pag1.price*this.pag1.count
                    }
                },
                    methods:{
                        add:function(){
                           return this.pag1.count++;
                        
                    }
                }
            })
        </script>
    </body>
</html>

六.数组API

1.String() :对象用于处理文本（字符串）。

new String(s);
String(s);

2.push();将值添加到数组的尾部；


<script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr + "<br />")
document.write(arr.push("James") + "<br />")
document.write(arr)

</script>

输出：

George,John,Thomas
4
George,John,Thomas,James

3.unshift();将值添加数组的头部;

<script type="text/javascript">

var arr = new Array()
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr + "<br />")
document.write(arr.unshift("William") + "<br />")
document.write(arr)

</script>

输出：

George,John,Thomas
4
William,George,John,Thomas

4.pop()；删除数组的最后一个元素，并且返回删除元素;

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();

fruits 结果输出：
Banana,Orange,Apple

5.splice();从一个数组当中删除一个或多个元素，返回所移除的元素；

<script type="text/javascript">

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
arr.splice(2,0,"William")
document.write(arr + "<br />")

</script>

输出：

George,John,Thomas,James,Adrew,Martin
George,John,William,Thomas,James,Adrew,Martin

6.slice(): 方法可从已有的数组中返回选定的元素.

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr + "<br />")
document.write(arr.slice(1) + "<br />")
document.write(arr)

</script>

输出：

George,John,Thomas
John,Thomas
George,John,Thomas

7.shift():方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr + "<br />")
document.write(arr.shift() + "<br />")
document.write(arr)

</script>

输出：

George,John,Thomas
George
John,Thomas

8.join(“分隔符”);将数组转换为字符串，字符串按照分隔符分割，返回分割好的字符串

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr.join())

</script>

输出：

George,John,Thomas

9.reverse();反转数组，返回翻转后的数组；

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr + "<br />")
document.write(arr.reverse())

</script>

输出：

George,John,Thomas
Thomas,John,George

10.concat():基于当前数组，创建一个新的数组，并返回这个新数组，不会改变原数组；

var color = ["red","green","blue"];
var colors2 = color.concat("yellow",["black","brown"]);

Vue 过滤器/计算属性/数组API