松鼠乐园 松鼠乐园
  • 注册
  • 登录
  • 首页
  • 快捷入口
    • Vue
    • Tensorflow
    • Springboot
    • 语言类
      • CSS
      • ES5
      • ES6
      • Go
      • Java
      • Javascript
    • 工具类
      • Git
      • 工具推荐
    • 服务器&运维
      • Centos
      • Docker
      • Linux
      • Mac
      • MySQL
      • Nginx
      • Redis
      • Windows
    • 资源类
      • 论文
      • 书籍推荐
      • 后端资源
      • 前端资源
      • html网页模板
      • 代码
    • 性能优化
    • 测试
  • 重大新闻
  • 人工智能
  • 开源项目
  • Vue2.0从零开始
  • 广场
首页 › Vue2.x从零开始 › filters的使用

filters的使用

迦娜王
2年前Vue2.x从零开始
818 0 9

基本用法

过滤器的目的就是通过简单的语法,来实现对原有数据的格式化输出。如果你比较较真的话,其实普通函数也能实现,只需要在需要格式化的地方调用函数也行。用法比较简单,可以用在{{}}表达式结尾或者v-bind结尾。

[loginview]

<template>
    <div>
        原始数据
        <p>{{date}}</p>
        使用过滤器格式化
        <p>{{date | format}}</p>
        <p>{{date | format3}}</p>
        使用函数格式化
        <p>{{format2(date)}}</p>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                date: new Date()
            }
        },
        filters: {
            format: function (value) {
                if (!value) return ''
                value = value.toLocaleDateString()
                return value
            },
            format3: function (value) {
                if (!value) return ''
                value = value.toLocaleString()
                return value
            },
        },
        methods: {
            format2(value) {
                if (!value) return ''
                value = value.toLocaleDateString()
                return value
            }
        }

    }
</script>

以上代码演示了通过不同的方式实现的数据格式化,多个过滤器的定义可以用逗号隔开。最终页面输出:

过滤器的串联用法

过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。
代码:

<template>
    <div>
        原始数据
        <p>{{num}}</p>
        使用过滤器实现对num的加1
        <p>{{num | add1}}</p>
        <p>{{num | add1 | add1 | add2}}</p>

    </div>
</template>


<script>

    export default {
        data() {
            return {
                num: 0
            }
        },
        filters: {
            add1: function (value) {
                return value+1
            },
            add2: function (value) {
                return value+2
            },
        }
    }
</script>

代码演示了过滤的串联,不论是相同的过滤器还是不同的过滤器都可以串联使用。
最终页面输出:

定义全局的过滤器

main.js中定义我们的全局过滤器。如果你定义的过滤器数量很多,最好单独使用一个js文件来定义,然后引入到main.js中。

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

//定义全局过滤器
Vue.filter('add1', function (value) {
    return value+1
})

new Vue({
  render: h => h(App),
}).$mount('#app')

修改组件内的代码如下:

<template>
    <div>
        原始数据
        <p>{{num}}</p>
        使用过滤器实现对num的加1
        <p>{{num | add1}}</p>
    </div>
</template>


<script>
    export default {
        data() {
            return {
                num: 0
            }
        }
    }
</script>    

最终页面如期输出:

过滤器多参数传递

过滤器是 JavaScript 函数,因此可以接收参数,只是第一个参数是默认传递的。我们依然通过代码来演示下:

<template>
    <div>
        原始数据
        <p>{{num}}</p>
        使用过滤器实现对num的加1
        <p>{{num | add1(true)}}</p>
    </div>
</template>


<script>
    export default {
        data() {
            return {
                num: 0
            }
        },
        filters:{
            add1:function (value,addDouble) {
                if (addDouble) {
                    return value + 2
                }
                return value + 1
            }
        }
    }
</script>

现在我们事先的过滤器可以通过条件来切换分支逻辑了。

最终页面如期输出:

file

[/loginview]

9
本文系作者 @迦娜王 原创发布在 松鼠乐园。未经许可,禁止转载。
动态样式绑定
上一篇
Linux&Mac下fork和exec的简单使用
下一篇
评论 (0)

请登录以参与评论。

现在登录
  • 基本用法
  • 过滤器的串联用法
  • 定义全局的过滤器
  • 过滤器多参数传递
9
相关文章
router的使用
watch属性的使用
computed属性的使用
vuex的简单使用
松鼠乐园

资源整合,创造价值

小伙伴
墨魇博客 无同创意
目录
重大新闻 Centos CSS Docker ES5 ES6 Go Java Javascript Linux Mac MySQL Nginx Redis Springboot Tensorflow Vue Vue2.x从零开始 Windows 书籍推荐 人工智能 前端资源 后端资源 壁纸 开源项目 测试 论文
Copyright © 2018-2021 松鼠乐园. Designed by nicetheme. 浙ICP备15039601号-4
  • 重大新闻
  • Centos
  • CSS
  • Docker
  • ES5
  • ES6
  • Go
  • Java
  • Javascript
  • Linux
  • Mac
  • MySQL
  • Nginx
  • Redis
  • Springboot
  • Tensorflow
  • Vue
  • Vue2.x从零开始
  • Windows
  • 书籍推荐
  • 人工智能
  • 前端资源
  • 后端资源
  • 壁纸
  • 开源项目
  • 测试
  • 论文
热门搜索
  • jetson nano
  • vue
  • java
  • mysql
  • 人工智能
  • 人脸识别
迦娜王
坚持才有希望
1224 文章
33 评论
231 喜欢
  • 9
  • 0
  • Top