Vue2.x教程之filter过滤器的使用

vue2.0以后已经放弃对自带的过滤器函数,但同时对开发人员提供了一个filter 的处理器,虽然命名为  filter  ,但是我觉得叫做数据处理器更体贴。用以在不改变的data 的情况下  输出前段需要的格式数据。

基本调用方法:

[html]  view plain  copy
  1. <span style="color: rgb(82, 82, 82); white-space: pre; background-color: rgb(248, 248, 248);"><span style="font-family:SimSun;font-size:14px;">{{ message | filterFun }}span>span>  

[javascript]  view plain  copy
  1. new Vue({  
  2.   // ...  
  3.   filters: {  
  4.     filterFun: function (value) {  
  5.       return value  
  6.     }  
  7.   }  
  8. })  
稍微复杂一点的数据处理:

[javascript]  view plain  copy
  1. new Vue({  
  2.   // ...  
  3.   filters: {  
  4.     filterFun: function (value) {  
  5.       switch(value){
  6.       case 1:return '初级';
  7.        case 2:return '中级';
  8.       case 2:return '高级';
  9.      }
  10.     }  
  11.   }  
  12. })  


注册全局的filter过滤器:

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>vue自定义过滤器title>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8">script>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    head>
    <body>
        <div class="test">
            <p>{{message | sum}}p>
            <p>{{message | cal 10 20}}p>  
            <p>{{message | sum | currency }}p> 
            
            <input type="text" v-model="message | change"> 
            
        div>
        <script type="text/javascript">
        
//        -----------------------------------------华丽分割线(从model->view)---------------------------------------
            Vue.filter("sum", function(value) {   //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面
                return value + 4;
            });
            
            Vue.filter('cal', function (value, begin, xing) {   //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面
                return value + begin + xing;
            });

//        -----------------------------------------华丽分割线(从view->model)---------------------------------------
            Vue.filter("change", {
                read: function (value) { // model -> view 在更新 `` 元素之前格式化值
                    return value;
                },
                write: function (newVal,oldVal) { // view -> model  在写回数据之前格式化值
                    console.log("newVal:"+newVal); 
                    console.log("oldVal:"+oldVal);
                    return newVal;
                }
            });

            var myVue = new Vue({
                el: ".test",
                data: {
                    message:12
                }
            });
            
        script>
    body>
html>

你可能感兴趣的:(vueJs,vue)