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过滤器,通过这些过滤器我们可以很方便的实现文本格式化等高级功能,提高了页面展示的效果和用户体验。
The above is the detailed content of What are the commonly used filters in Vue?. For more information, please follow other related articles on the PHP Chinese website!

The article discusses useEffect in React, a hook for managing side effects like data fetching and DOM manipulation in functional components. It explains usage, common side effects, and cleanup to prevent issues like memory leaks.

Lazy loading delays loading of content until needed, improving web performance and user experience by reducing initial load times and server load.

Higher-order functions in JavaScript enhance code conciseness, reusability, modularity, and performance through abstraction, common patterns, and optimization techniques.

The article discusses currying in JavaScript, a technique transforming multi-argument functions into single-argument function sequences. It explores currying's implementation, benefits like partial application, and practical uses, enhancing code read

The article explains React's reconciliation algorithm, which efficiently updates the DOM by comparing Virtual DOM trees. It discusses performance benefits, optimization techniques, and impacts on user experience.Character count: 159

Article discusses preventing default behavior in event handlers using preventDefault() method, its benefits like enhanced user experience, and potential issues like accessibility concerns.

The article explains useContext in React, which simplifies state management by avoiding prop drilling. It discusses benefits like centralized state and performance improvements through reduced re-renders.

The article discusses the advantages and disadvantages of controlled and uncontrolled components in React, focusing on aspects like predictability, performance, and use cases. It advises on factors to consider when choosing between them.


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.

EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function

Dreamweaver Mac version
Visual web development tools

Notepad++7.3.1
Easy-to-use and free code editor

VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft
