A simple filter
Let's say that you have a component where you want to show a message, but if it's more than
20 characters long, you truncate it and add three dots at the end. Here is an example of how you can achieve that
using a filter:
<div id="app">
<p>{{ message|truncate }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js! This is a message that is longer than 20 characters long.'
},
filters: {
truncate: function(value) {
if (value.length > 20) {
value = value.substring(0, 17) + '...';
}
return value
}
}
})
</script>
We can make some edits to this filter and make it possible to pass one more value to the filter. This value can be the maximum number of characters allowed.
<div id="app">
<p>{{ message|truncate(20) }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js! This is a message that is longer than 20 characters long.'
},
filters: {
truncate: function(value, limit) {
if (value.length > limit) {
value = value.substring(0, (limit - 3)) + '...';
}
return value
}
}
})
</script>
Chaining filters
A cool thing about filters is that they can be chained. So instead of adding the three dots in the truncate filter, we'll create another
filter for adding tailing content.
<div id="app">
<p>{{ message|truncate(20)|tailing('...') }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js! This is a message that is longer than 20 characters long.'
},
filters: {
truncate: function(value, limit) {
return value.substring(0, limit)
},
tailing: function(value, tail) {
return value + tail;
}
}
})
</script>
I know that seemed like a weird example and it's not something you would do in the real world, but it shows how you can chain filters in a simplified way.
There are tons of things you can do with filters and I encourage you to try to build some for your self. It's also possible to download packages containing smart filters like truncate, capitalizing, transforming and similar. vue-filter is a package containing a lot of different things you often need. You don't always need to reinvent the wheel, but it's nice to know how something works.
Read more about Vue on A Hacker's Day:
Introduction to Vue.js Props
Introduction to Vue.js Slots
Communicating between Vue.js components
Comments
No comments yet