vue入门 vue基础之简单使用4--过滤器(Filter)

指令集：指令集是指指令的集合 ，而指令:凡是v-开头的都是vue指令
详细代码看最后

全局Filter

基础使用

定义

        Vue.filter("price",function(value){
            return value.toFixed(2);
        });

参数一是定义的过滤器名称，参数二是回调函数(此处传参是money的值)
回调函数可以用匿名函数来取代

       Vue.filter("price",  value => value.toFixed(2));

使用

    <div id="app">
        {{money|price}}
    </div>
---------js
            var vm = new Vue({
            el: "#app",
            data: {
                money: 10
            }
        });

在指定得数据后面加上过滤器得名称即可
但注意的是，此处的price其实是简写，此处原写法是price()，因为是空参，所以可以省略。而如果是要有其他参数时，比如需要输入一个参数，来设置小数后几位，则可以有:

 {{money|priceAuto(1)}}<br>
--------------js
Vue.filter("priceAuto",(value,val)=>value.toFixed(val)); 

此处的数字1即为传入的val参数。当然，此处定义函数时，可以使用vue的扩展变量 即Vue.filter(“name”,function(val,…args)){}),这样使用过滤器时可以输入无限个变量，此时args是一个数组

过滤器的叠加使用

先新增一个过滤器,用于联结字符串

        Vue.filter("addSymbol",(value,text)=>{
            return text+value;
        })

然后与上面的priceAuto联合使用

        {{money|priceAuto(1)|addSymbol("￥")}}<br>

过滤器的叠加使用时，是从前往后执行。

局部Filter

局部Filter除了是在new Vue()对象内，其他无大概区别

    <div id="app">
        {{msg|upper}}
    </div>

   var vm = new Vue({
            el: "#app",
            data: {
                money: 10, 
                msg:"niuBi"
            },
            methods: {

            },
            filters:{
                upper:function(value){
                    return value.toUpperCase();
                }
            }
        });