05-过滤器

1、局部过滤器

<!-- 过滤器分全局过滤器和局部过滤器,以下是局部过滤器 -->
    <div id="app">
        <p>{{num | numFun}}</p>
    </div>

<script>
    var vm = new Vue({
    el: "#app",
    data: {
              num: 20
          },
    // 过滤器
    filters: {
                numFun(val) {
                    console.log(val);
                    return val * 2 + '$'
                }
            }
        })
</script>

上述运行结果：

 2、过滤器练习

 <div id="app">
     <div class="main" v-for="item in arrs">
     <p>姓名：{{item.name | setName}}</p>
     <p>工资：{{item.money | moneyFun | nameFun}}</p>
    </div>
</div>

<script>
        var vm = new Vue({
            el: '#app',
            data: {
                arrs: [{
                        name: '王源',
                        age: 22,
                        money: 2312.32
                    },
                    {
                        name: '王俊凯', 
                        age: 23,
                        money: 3423.67
                    },
                    {
                        name: '易烊千玺', 
                        age: 21,
                        money: 9756.23
                    },
                ]
            },
            filters: {
                // Math.floor 向下取整
                moneyFun(val) {
                    return Math.floor(val)
                },
                nameFun(val) {
                    return val + '￥'
                },

                setName(val) {
                    // split() 方法用于把一个字符串分割成字符串数组。
                    //提示： 如果把空字符串 ("") 用作 separator，
                    //那么 stringObject 中的每个字符之间都会被分割。
                    //注意： split() 方法不改变原始字符串。


                    let vals = val.split('');
                    //fill() 填充方法、
                    // 第一个参数 要填充的值
                    // 第二个参数 是开始的位置
                    // 第三个参数 是结束的位置
                    vals.fill('*', 1, val.length);
                    //通过join  方法进行转换成字符串
                    //join() 方法用于把数组中的所有元素转换一个字符串。
                    //元素是通过指定的分隔符进行分隔的。
                    let newVal = vals.join('');
                    return newVal
                }


            }
        })
    </script>

上述运行结果：