2023vue常用的过滤器有哪几种

 所属分类:web前端开发

 浏览:51次-  评论: 0次-  更新时间:2023-05-25
描述:更多教程资料进入php教程获得。 Vue.js是前端开发中备受欢迎的框架,它提供了许多实用的功能,其中过滤器是其重要的特性之一。过滤器(Filt...
更多教程资料进入php教程获得。

Vue.js是前端开发中备受欢迎的框架,它提供了许多实用的功能,其中过滤器是其重要的特性之一。

过滤器(Filter)是Vue.js提供的一种数据处理工具,可以对模板中的数据进行过滤和格式化输出,以便更为适合页面展示。使用Vue.js的过滤器功能,开发者可以很方便的在模板中使用一些高级的文本转换和格式化功能。下面将会介绍几种常用的Vue.js过滤器。

1. capitalize

将字符串第一个字符转变为大写。

<p>{{ message | capitalize }}</p>
登录后复制
<script>
  Vue.filter('capitalize', function(value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  })
  new Vue({
    el: '#app',
    data: {
      message: 'welcome to vue.js'
    }
  })
</script>
登录后复制

2. currency

将数字转换为带有货币符号的格式。

<p>{{ price | currency }}</p>
登录后复制
<script>
  Vue.filter('currency', function (value, currency) {
    var digitsRE = /(d{3})(?=d)/g
    value = parseFloat(value)
    if (!isFinite(value) || (!value && value !== 0)) return ''
    currency = currency != null ? currency : '$'
    var stringified = Math.abs(value).toFixed(2)
    var _int = stringified.slice(0, -3)
    var i = _int.length % 3
    var head = i > 0
      ? (_int.slice(0, i) + (_int.length > 3 ? ',' : ''))
      : ''
    var _float = stringified.slice(-3)
    var sign = value < 0 ? '-' : ''
    return sign + currency + head +
      _int.slice(i).replace(digitsRE, '$1,') +
      _float
  })
  new Vue({
    el: '#app',
    data: {
      price: 12345.6789
    }
  })
</script>
登录后复制

3. filterBy

筛选数组或对象。

<div class="list-item" v-for="(item, index) in list | filterBy search">{{ item.name }}</div>

<input type="text" v-model="search">
登录后复制
<script>
  new Vue({
    el: '#app',
    data: {
      search: '',
      list: [
        { name: 'apple', type: 'fruit'},
        { name: 'banana', type: 'fruit' },
        { name: 'pear', type: 'fruit' },
        { name: 'carrot', type: 'vegetable'}
      ]
    },
  })
</script>
登录后复制

4. orderBy

对数组或对象进行排序。

<table>
  <tr v-for="item in list | orderBy 'score' -1">
    <td>{{ item.name }}</td>
    <td>{{ item.score }}</td>
  </tr>
</table>
登录后复制
<script>
  new Vue({
    el: '#app',
    data: {
      list: [
        { name: 'apple', score: 90},
        { name: 'banana', score: 60 },
        { name: 'pear', score: 80 },
        { name: 'carrot', score: 70}
      ]
    },
  })
</script>
登录后复制

5. date

将日期格式化输出。

<p>{{ date | date('YYYY-MM-DD') }}</p>
登录后复制
<script>
  Vue.filter('date', function (value, format) {
    if (!value) return ''
    format = format || 'YYYY-MM-DD'
    return moment(value).format(format)
  })
  new Vue({
    el: '#app',
    data: {
      date: '2021-08-16'
    },
  })
</script>
登录后复制

以上是常用的几种Vue.js过滤器,通过这些过滤器我们可以很方便的实现文本格式化等高级功能,提高了页面展示的效果和用户体验。

以上就是vue常用的过滤器有哪几种的详细内容,更多请关注zzsucai.com其它相关文章!

 标签: ,
积分说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值积分充值会员更多说明»

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!