过滤器filters

71 阅读1分钟

filerts也是一个配置项,是json对象,使用的方法是 数据|过滤器的属性名(实参)=过滤器返回值,过滤器必须有返回值,数据|过滤器的属性名就是调用过滤器属性的方法。vue上的属性是什么类型就是什么类型。无论你写的实参是什么,过滤器的方法第一个参数都是前面的数据,第二个开始才是实参,Number有toFixed方法,可以将数字类型转化为字符串,但是会根据参数,得到具体小数点后几位的数字,被引号括起来的字符。以前,是认为过滤器的参数无关业务,不用this,但是现在不用了,因为方法/计算属性都能写,Vue3没有过滤器了。全局过滤器是Vue.filter(过滤器名,函数)添加了一个过滤器且是全局的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue (1).js"></script>

</head>
<body>
    <div id="app">
        {{price|a|b(3)}}
    </div>
    <script>
        const vm= new Vue({
        data:{
         price:1.234567
         } ,
        el:'#app',
        methods:{
        
        },
        filters:{
            a(a){
              if(a==''||a==undefined||a==null){
                return '-'
              }
              return a

            },
            b(a,b){
                if(typeof a=="number"){
                return a.toFixed(b)}
                return a
            }
        }
         })
    </script>
    
</body>
</html>