vue filter 筛选器 多种用法

香菊网 发表于: 2019-06-27 分类: H5部分  前端front  HTML&CSS  

1 、全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面 和内部注册


<body>
    ...
    <p>{{message | sum}}</p>
    ....
</body>

<!-- cdn -->
<script>
    ...
    // 全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面
    Vue.filter('sum',value => value + 1 )
 
    let vue = new Vue({
        data: { message: 12 }
    })
</script>

<!-- cli -->
<script>
// 注册在实例化内部
export default {

    data () {
        return {
            message: 12 
        }
    },
    filters: {
        sum (value) { reutrn value + 1 }
    }
}
</script>

2 、vue filter 参数

<p>{{message | cal 10 20}}</p>

<!--过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串,而不带引号的参数按表达式计算。-->


Vue.filter('cal', (value, begin, xing) => {   
    return value + begin + xing;
});

3 、vue filter  input 的输入触发周期

<input type="text" v-model="message | change"> 

<!--用户从input输入的数据在回传到model之前也可以先处理-->


Vue.filter("change", {
   read: function (value) { // model -> view 在更新 `<input>` 元素之前格式化值
       return value;
   },
   write: function (newVal,oldVal) { // view -> model  在写回数据之前格式化值
       console.log("newVal:"+newVal); 
       console.log("oldVal:"+oldVal);
       return newVal;
   }
});
标签: H5部分前端frontHTML&CSS
Copyright © 2019 幻雨焉缘博客 | 浙ICP备19001843号-1
----------------------------------
种一棵树,最好的培养时间是十年前,其次是现在 加油  (ง •_•)ง。        ──── 前端攻城狮