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

ゝ一纸荒年。 2022-06-13 09:30 287阅读 0赞

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

**基本调用方法：**

**\[html\]**  [view plain][]   [copy][view plain]

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][view plain]

1.  **new** Vue(\{  
2.    // ...  
3.    filters: \{  
4.      filterFun: **function** (value) \{  
5.        **return** value  
6.      \}  
7.    \}  
8.  \})  
9.

**稍微复杂一点的数据处理：**

**\[javascript\]**  [view plain][]   [copy][view plain]

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 在更新 `<input>` 元素之前格式化值
                        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>

[view plain]: http://blog.csdn.net/wngzhem/article/details/53162341#