vue入门基础（2）

1.vue中的过滤器

定义：让要显示在页面上的内容进行重新筛选

全局过滤器：

<div class="demo">
        {{5.96352|htmls}}
    </div>
    <script src="vue/dist/vue.js"></script>
    <script>
        Vue.filter("htmls",function(demo){
            if(demo<10){
                return "0"+demo;
            }else{
                return demo;
            }
            return data.toFixed(3)
        })
    </script>

局部过滤器：

<div class="demo">
        {{5.96352|htmls}}
    </div>
    <script src="vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:'.demo',
            filters:{
                htmls:function(data){
                    if(demo<10){
                        return "0"+demo;
                    }else{
                        return demo;
                    } 
                    return data.toFixed(3)
                }
            }*/
        })   
    </script>

2.计算属性

计算属性关键词: computed

   <div id='itany'>
       <h1>{{msg.split(' ').reverse().join('===')}}</h1>
       <a href="#">{{count}}</a>
   </div>
    <script src="vue/dist/vue.js"></script>
    <script>    
       new Vue({
           el:'#itany',
           data:{
               msg:'hello vue'
           },
           computed:{//计算属性
               count:function(){
                   return this.msg.split(' ').reverse().join('===')
               }
           }
       })
    </script>

注：计算属性用在处理一些很复杂的逻辑时。

2.数组API

1.String()：把数组转换为字符串，并返回结果。

2.join()：将数组转换为字符串，字符串按照分隔符分割，返回分割好的字符串。

3.concat()：concat(arr1,arr2);将多个数组合并为一个数组，并且返回合并数组。

4.slice()：返回所截取数组的项，但是不包括结束位置的项，不会改变原数组。 。

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

6.reverse()：反转数组，返回翻转后的数组。

7.push()：push(value);将值添加到数组的尾部。

8.pop()：删除数组的最后一个元素，并且返回删除元素。

9.unshift()：unshift(value);将值添加数组的头部。

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