Template Logic Sharing with Filters
To share template logic, Vue.js has filters.
Filters can be used in mustache interpolations ({{ interpolatingSomething }}
) or in expressions (for example, when binding a value). filter
is a function that takes a value and outputs something that can be rendered (usually a String
or a Number
).
So, an example filter called truncate
would be used in a template as follows (here, we have put some long placeholder text):
<template> <div id="app"> {{ message | truncate }} </div> </template> <script> export default { data() { return { message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation llamco laboris nisi ut aliquip ex ea commodo...