Vue filter介绍及其使用:

Vue.js 提供了强大的过滤器API，能够对数据进行各种过滤处理，返回需要的结果。

默认的过滤器

注意：在vue.js2.0版本中已经废弃使用默认过滤器

自定义过滤器:

你可以在一个组件中定义一个组件过滤器，或者在创建Vue实例时创定义一个全局过滤器。

1、一个过滤器:

  <div id="app">
        输入：
        <input type="text" v-model='msg'>
        <br>
         正常：{{msg}}
         <br>
         加两个filter首尾字母变大写：{{msg|go|end}}

    </div>
    <script src="../js/vue.js"></script>
    <script type="text/javascript">
        //定义组件过滤器
        var vm = new Vue({
            el: '#app',
            data: {
                msg:'',
            },
            filters: {
                //末尾字母变大写
                end: function (value) {
                    if(!value) return '' //如果为空，则返回空字符串
                    value = value.toString()
                    return value.substring(0, value.length-1) + value.charAt(value.length - 1).toUpperCase();
                },
                //首字母变大写
                go:function(value){
                    if(!value) return ''; //如果为空，则返回空字符串
                    value = value.toString();
                    return value.charAt(0).toUpperCase() + value.substring(1);
                }
            },
           
        })

    </script>

2、多个过滤器

 
  <div id="div1">
        随便输：<input v-model="text">
        <br> 正常：{{text}}
        <br> 加全局过滤器后首字母大写：{{text|go}}
        <br>加全局过滤器后尾字母大写：{{text|end}}
    </div>
    <script src="../js/vue.js"></script>
    <script>
                //定义全局过滤器
                Vue.filter('go', function (value) {
                    if(!value) return ''; //如果为空，则返回空字符串
                    value = value.toString();
                    return value.charAt(0).toUpperCase() + value.substring(1);
                    //charAt() 方法用于返回指定索引处的字符。索引范围为从 0 到 length() - 1。
                    //toUpperCase() 方法将字符串小写字符转换为大写。
                    //substring(x)是从字符串的的第x个字符截取 substring(x,y）是从x到y前的位置停止
                })
                
                Vue.filter('end', function (value) {
                    if(!value) return '' //如果为空，则返回空字符串
                    value = value.toString()
                    return value.substring(0, value.length-1) + value.charAt(value.length - 1).toUpperCase();
                })

        new Vue({
            el: "#div1",
            data: {
                text: "",
            }
        })
    </script>

以上就先介绍这些，后续更新!