Vue 过滤器

Vue过滤器

 [vue官方文档]Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在

 简单翻译下过滤器，顾名思义，过滤就是一个数据经过了这个过滤之后出来另一样东西，可以是从中取得你想要的，或者给那个数据添加点什么装饰，那么过滤器则是过滤的工具。例如，从[‘abc’,‘abd’,‘ade’]数组中取得包含‘ab’的值，那么可通过过滤器筛选出来‘abc’和‘abd’；把‘Hello’变成‘Hello World’，那么可用过滤器给值‘Hello’后面添加上‘ World’；或者把时间节点改为时间戳等等都可以使用过滤器。
JavaScript 表达式的尾部，由“管道”符号指示

Vue过滤器特点

• 在不改变原始数据的情况下 修改数据显示方式
• 过滤器可以串联
• 当原始数据发生变化 过滤器修改的数据也会变化 以最新的原始数据为准

Vue过滤器的状态

分为全局过滤器和局部过滤器
全局过滤器(全局的情况下filter没有s)

<div id="app">
    <h3>{{viewContent | addNamePrefix}}</h3>
</div>
<script>
    //addNamePrefix表示管道符的第二个值
    Vue.filter("addNamePrefix",(value)=>{
        //value表示当前管道符的第一个值
        return "my name is" + value//my name is 吕星辰
    })
 
    let vm = new Vue({
        el:"#app",
        data:{
            viewContent:"吕星辰" 
        }
    })
</script>

局部过滤器(局部的情况下filters有s)

<input type="text" v-model="msg">

<h2>{{msg}}</h2>
<h2>{{msg | addMsg | addMsg2}}</h2>

//js
data : {
         msg : "你好呀"
        },
filters : {
                addMsg(value) {
                    console.log(value);
                    console.log("过滤器");

                    return value + "我不好"
                },

                addMsg2(value) {
                    console.log(value);

                    return value + "好不好都和你没关系"
                }
            }