码迷,mamicode.com
首页 > 其他好文 > 详细

vue--过滤器

时间:2019-12-22 18:24:23      阅读:76      评论:0      收藏:0      [点我收藏+]

标签:pytho   数据处理   ble   括号   ini   oct   add   modules   特定   

过滤器

过滤器对将要显示的文本,先进行特定格式化处理,然后再进行显示。

注意:过滤器并没有改变原来的数据,只是产生新的对应的数据。

过滤器有全局过滤器和局部过滤器两种。

全局过滤器(没有s)
Vue.filter(过滤器名称,function(value,value2...){
    // 数据处理逻辑 
})
局部过滤器

在Vue实例中使用filters选项,当前实例范围内可用

new Vue({
filters(过滤器名称,
function(value,value2...){ // 数据处理逻辑 }
)
)
}

过滤器可以用在两个地方,双花括号{{ }}和v-bind表达式

<!-- 在双花括号中 -->
<div>{{数据属性名称 | 过滤器名称}}</div>
<div>{{数据属性名称 | 过滤器名称(参数值)}}</div>

<!-- 在 `v-bind` 中 --> <div v-bind:id="数据属性名称 | 过滤器名称"></div> <div v-bind:id="数据属性名称 | 过滤器名称(参数值)"></div>

目的:实现过滤敏感字符,如文本中有tmd,sb的都进行过滤掉

全局过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
            <h3>测试过滤器单个参数</h3>
            <!-- 原始属性名|过滤器 -->
            <p>{{content | contentFilter}}</p> <!-- 双{{}} -->
            <input type="text" :value="content | contentFilter"><!-- v-bind -->
    </div>
    
    <script>
       /*全局过滤器*/
         Vue.filter(contentFilter, function (value) {
            if(!value) {
                return ‘‘
            }
            // toString()转为字符串,toUpperCase()转为大写
            return value.toString().toUpperCase().replace(TMD, ***).replace(SB, ***)
        }) 

        new Vue({
            el: "#app",
            data: {
                content: "你TMD真SB"
            }
        })
    </script>
    
</body>
</html>

局部过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
            <h3>测试过滤器单个参数</h3>
            <!-- 原始属性名|过滤器 -->
            <p>{{content | contentFilter}}</p> <!-- 双{{}} -->
            <input type="text" :value="content | contentFilter"><!-- v-bind -->
            <input type="text" :value="javaScore | add(vueScore, pythonScore)"><!-- 多个参数 -->
    </div>
    
    <script>
      

        new Vue({
            el: "#app",
            data: {
                content: "你TMD真SB",
                javaScore: 90,
                vueScore: 99,
                pythonScore: 89
            },
            filters: { //定义局部 过滤器
                contentFilter (value) { // contentFilter 过滤名, value
                    if(!value) {
                        return ‘‘
                    }
                    return value.toString().toUpperCase().replace(TMD, ***).replace(SB, ***)
                },

                add (num1, num2, num3) {// add 过滤名, num1 其实就是引用时 | 左边的那个参数
                    return num1 + num2 + num3
                }
            }
        })
    </script>
    
</body>
</html>

vue--过滤器

标签:pytho   数据处理   ble   括号   ini   oct   add   modules   特定   

原文地址:https://www.cnblogs.com/zouzou-busy/p/11703631.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!