vue过滤器含例子

vue过滤器

  Vue. js支持在{ {}}插值的尾部添加一小管道符 | 对数据进行过滤,经常用于格式化文本,比如字母全部大写、货币千位使用逗号分隔等。过滤的规则是自定义的, 通过给 Vue 实例添 加选项 filters 来设置
  下面是一个使用过滤器格式化时间的案例


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <div id="app">
        <p>{
    {date | formateDate}}p>
    div>
    <script src="vue.js">

    script>
    <script>
        var padDate = function(value)
        {
      
              return value < 10 ? '0'+value : value; 
        }
        var app = new Vue(
            {
      
                el:"#app",
                data:{
      date:new Date()},
                mounted()
                {
      
                    _this = this;
                    this.timer = setInterval(function(){
      _this.date = new Date()},2000);

                },
                filters:{
      
                    formateDate:function(value)
                    {
      
                        var date = new Date(value);
                        var year = date.getFullYear();
                        var month = padDate(date.getMonth()+1);
                        var day = padDate(date.getDate());
                        var hour = padDate(date.getHours());
                        var minute = padDate(date.getMinutes());
                        var second = padDate(date.getSeconds());
                        return year +'-'+ month  +'-'+ day  +' '+ hour +'-'+ minute  +'-'+second;
                    }
                }
            }
        )
    script>
body>
html>

vue过滤器含例子_第1张图片

你可能感兴趣的:(vue)