Vue.js 基础学习之过滤器

Posted 2020-10-05 胡卓

过滤器：filter

格式化变量的输出内容，只用于一些简单的在制作的最后一步对内容的输出格式做些调整（如日期格式化，字母大小写，数字再计算等等）

例如我们需要将最终的结果字符串以大写方式展示出来，还有将小数转化成百分比之后再显示出来

<div id="app">
        <input type="text" v-model=‘message‘> {{ message | toupper }}
        <br />
        <input type="text" v-model=‘num‘> {{ num | toprecentage }}
    </div>

<script>
    new Vue({
        el : ‘#app‘,
        data: {
            message: ‘hello world !‘,
            num: 0.3,
        },
        filters : {
            toupper : function(val){
                return val = val.toUpperCase();
            },
            toprecentage : function(val) {
                return val = val * 100 + ‘%‘;
            }
        }
    });
</script>

过滤器时通过一个 | 符号来实现的，| 前面的是需要处理的值，后面是过滤器的名称，在new Vue()中的filters中添加这些过滤器并写明处理方法就可以了，在处理方法function中可以有2个参数，第一个参数val就是 | 前面的这个值，第二个参数是同时需要传递进来的值，例如：在一个显示钱币单位的例子中

<div id="app">
        <input type="text" v-model.number=‘num‘>{{ num | currency(unit) }}
    </div>

<script>
    new Vue({
        el : ‘#app‘,
        data: {
            num : 10 ,
            unit : ‘元‘,
        },
        filters : {
            currency : function(val ,unit){
                 val = val || 0; 
                 unit = unit || ‘元‘;
                 return val + unit;
            }
        }
    });
</script>

上面这个例子可以通过改变data中的对应的值来改变钱币数和单位，用到了2个参数，第二个参数的传递也很简单。