Vue 之过滤器

过滤器

文档中描述

描述

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示

语法

在双花括号中

{{ message | capitalize }}

在 v-bind中

< div v-bind:id=“rawId | formatId”>

创建过滤器

创建 Vue 实例之前全局定义过滤器

  //自定义过滤器  dateString 过滤器名 , function 过滤器函数 可以传参 value为空则执行 | 后面的格式进行转换
    Vue.filter("dateString",function (value,format) {
        //如果format 有值 用 format 没值 用 默认的格式
       return moment(value).format(format|| 'YYYY-MM-DD HH:mm:ss');

    });


    let a = new Vue({
        el:"#app",
        data:{
            date:new Date()
        },
    });

例如时间转换

<h2>过滤器</h2>
<div id="app">
    <p>显示格式化等日期</p>
    原日期{{date}}
    <p>格式化后的日期 年月日 时分秒</p>
    {{  date | dateString }}
    <p>格式化后的日期 年月日 </p>
    {{  date | dateString('YYYY-MM-DD') }}

    <p>格式化后的日期 时分秒</p>
    {{  date | dateString('HH:mm:ss') }}
</div>

所需要库

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- vue 库-->
<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.js"></script>  <!-- 时间转换 moment 库-->

如图