vue常用的过滤器有哪几种

百变鹏仔 2个月前 (10-31) #前端问答

文章标签几种

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常用的过滤器有哪几种

1. capitalize

2. currency

3. filterBy

4. orderBy

5. date

javascript里怎么输入

网页关闭javascript

javascript怎么实现异步

javascript隐藏的元素显示属性

javascript要全部记住吗