本文编写于 169 天前,最后修改于 135 天前,其中某些信息可能已经过时。

ES2017 引入了字符串补全长度的函数。如果某个字符串的长度不够指定的长度,会在头部或尾部补全。

使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString='') 或 String.prototype.padEnd(maxLength, fillString='')来填充字符串;

padStart()用于头部补全,padEnd()用于尾部补全。

'a'.padStart(3, '0') // '00a'
'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'

上面代码中,padStart()和padStart()一共接受两个参数,第一个参数用来指定字符串的最小长度,第二个参数是用来补全的字符串。

如果原字符串的长度,等于或大于指定的最小长度,则返回原字符串。

'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'

如果用来补全的字符串与原字符串,两者的长度之和超过了指定的最小长度,则会截去超出位数的补全字符串。

'abc'.padStart(10, '0123456789')
// '0123456abc'

如果省略第二个参数,默认使用空格补全长度。

'x'.padStart(4) // ' x'
'x'.padEnd(4) // 'x '

padStart()的常见用途是为数值补全指定位数。下面代码生成 10 位的数值字符串。

'1'.padStart(10, '0') // "0000000001"
'12'.padStart(10, '0') // "0000000012"
'123456'.padStart(10, '0') // "0000123456"

另一个用途是提示字符串格式。

'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

过滤器

  • 私有过滤器
  • 全局过滤器

因初学,Vue使用CDN引入的形式

1.私有过滤器
先来初始化一个Vue实例

const vm = new Vue({
    el:"#app",
    data:{
        ctime:new Date()
    }
})

我们将data中的ctime渲染到页面上


<table class="table table-hover table-bordered">
    <thead>
        <tr>
            <th>歌曲名称</th>
            <th>音乐人</th>
            <th>专辑图片</th>
            <th>创建时间</th>
            <th></th>
        </tr>
    </thead>
    <tbody v-for="item in search(addname)" :key="item.album_id">
        <tr>
            <td>{{item.album_title}}</td>
            <td>{{item.author}}</td>
            <td :style="{ 'background-image': 'url(' + item.pic_small + ')','background-repeat':'no-repeat'}"></td>
            <!-- 时间 -->
            <td>{{ctime}}</td>
            <td><button class="btn btn-danger" @click.prevent="del(item.album_id)">删除</button></td>
 
        </tr>
    </tbody>

页面效果如图所示

这样的时间是肯定不行的
我们需要在Vue帮我们渲染数据之前,给数据"过滤"一下,让他们以我们想要的方式渲染到页面上

在刚开始创建的Vue实例上绑定一个私有的过滤器

const vm = new Vue({
    el:"#app",
    data:{
        ctime:new Date()
    },
    //定义私有过滤器
    filters:{
      //datechange是过滤器的名字
      datechange:function(datastr){
        //datastr是第一个参数,表示要处理传入的数据,一般表示管道符前的数据
        //根据给定的字符串获取时间
        var dt = new Date(datastr)
                 var y = dt.getFullYear()
            var m = dt.getMonth()
                var d = dt.getDate()
                 var hh = dt.getHours()
                var mm = dt.getMinutes()
                var ss = dt.getSeconds()
                return `${y}-${m}-${d}    ${hh}:${mm}:${ss}`
      }  
    }
})

注意观察过滤器的返回值,返回了一个y-m-d hh:mm:ss的时间格式的字符串,这表明我们拿到ctime的时间对其进行了一系列的加工,最终返回一个我们需要的输出格式,Vue在渲染前就会帮我们处理,然后在渲染到页面上

那么怎么使用呢?

管道符

6<table class="table table-hover table-bordered">
        <thead>
            <tr>
                <th>歌曲名称</th>
                <th>音乐人</th>
                <th>专辑图片</th>
                <th>创建时间</th>
                <th></th>
            </tr>
        </thead>
        <tbody v-for="item in search(addname)" :key="item.album_id">
            <tr>
                <td>{{item.album_title}}</td>
                <td>{{item.author}}</td>
                <td :style="{ 'background-image': 'url(' + item.pic_small + ')','background-repeat':'no-repeat'}"></td>
                <!-- 时间 -->
                <!-- 管道符后面跟的是过滤器的名字 -->
                <td>{{ctime|datachange}}</td>
                <td><button class="btn btn-danger" @click.prevent="del(item.album_id)">删除</button>
</td>
     
            </tr>
   </tbody>6

管道符后面跟的是过滤器的名字

我们来看下加了过滤器之后的效果吧

这明显也不对啊,看秒应该是07才对嘛,这时候就要用到padStart了 先看看全局过滤器吧

全局过滤器
全局过滤器的使用方法和私有过滤器一样,写法有区别

Vue.filter('过滤器的名字'function(datastr){
        //处理
})

所谓的全局过滤器,就是所有的VM实例都共享的

更多相关系列教程请及时关注妙笔生花个人博客,本网站由皮皮家园终身维护!
1.Vue.js 是什么?起步及安装
http://blog.zh66.club/index.php/archives/474/
2.Vue.js 声明式渲染
http://blog.zh66.club/index.php/archives/476/
3.vue.js 条件与循环
http://blog.zh66.club/index.php/archives/477/
4.vue.js 处理用户输入
http://blog.zh66.club/index.php/archives/478/
5.vue.js实现跑马灯效果
http://blog.zh66.club/index.php/archives/479/
6.vue.js 事件修饰符
http://blog.zh66.club/index.php/archives/480/
7.vue.js 表单输入绑定
http://blog.zh66.club/index.php/archives/481/
8.vue.js 简易的计算器
http://blog.zh66.club/index.php/archives/482/
9.vue.js 中样式的使用
http://blog.zh66.club/index.php/archives/483/
10.vue.js 之 v-forkey 属性
http://blog.zh66.club/index.php/archives/484/
11.vue.js 内容的总结和回顾
http://blog.zh66.club/index.php/archives/485/
12.vue.js 中 v-if 和 v-show 的使用
http://blog.zh66.club/index.php/archives/486/
13.vue.js 品牌案例~列表的添加删除功能
http://blog.zh66.club/index.php/archives/488/
14.vue.js 品牌案例~列表的关键字检索功能
http://blog.zh66.club/index.php/archives/489/
15.vue.js 过滤器的基本使用
http://blog.zh66.club/index.php/archives/491/
16.vue.js 自定义一个私有的过滤器
http://blog.zh66.club/index.php/archives/490/
17.vue.js 生命周期函数演示
http://blog.zh66.club/index.php/archives/492/
18.vue.js 中 vue-resource 基本使用
http://blog.zh66.club/index.php/archives/493/