Column goal
Under the control of the joint technology stack of vue and element UI, this column provides effective source code examples and information point introductions for flexible use.
Provide some basic operations of vue2: installation, reference, template use, computed, watch, life cycle (beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed, activated, deactivated, errorCaptured, components,), $root, $parent , $children , $slots , $refs , props, $emit , eventbus ,provide / inject, Vue.observable, $listeners, $attrs, $nextTick , v-for, v-if, v-else,v- else-if, v-on, v-pre, v-cloak, v-once, v-model, v-html, v-text, keep-alive, slot-scope, filters, v-bind, .stop, . native, directives, mixin, render, internationalization, Vue Router, etc.
Contents of this article
Filter introduction
Filter in Vue.js is a custom function for processing text, which can be used directly in templates. Filters can be used in two places: 双花括号插值和 v-bind 表达式. 过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号（|）表示.
The usage steps are as follows:
-
Define filters: Define a function in the filters attribute of the Vue instance or component, which receives a parameter (the text that needs to be filtered) and returns the filtered text.
-
Use filters in templates: Where you need to use a filter, add the name of the filter after the expression, separated by a pipe character (|).
Example renderings
Sample source code
/*
* @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）
* @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
* @Email: [email protected]
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2024-02-06
*/
<template>
<div class="djs-box">
<div class="topBox">
<h3>vue中filters的使用方法（图文示例）</h3>
<div>大剑师兰特, 还是大剑师兰特，gis-dajianshi</div>
</div>
<div class="dajianshi">
<p>变化前：{
{
message}} ， filter变化后：{
{
message | capitalize }}</p>
<p>变化前：{
{
price }} ，filter变化后：{
{
price | currency }}</p>
<p>变化前：{
{
date }} ，filter变化后：{
{
date | formatDate }}</p>
</div>
</div>
</template>
<script>
export default {
data() {
return{
message: 'hello world',
price: 1234.56,
date: '2022-01-01'
}
},
filters: {
capitalize: function(value) {
if (!value) return '';
value = value.toString();
return value.charAt(0).toUpperCase() + value.slice(1);
},
currency: function(value) {
if (!value) return '';
return '￥' + value.toFixed(2);
},
formatDate: function(value) {
if (!value) return '';
return new Date(value).toLocaleDateString();
}
}
}
</script>
<style scoped>
.djs-box {
width: 1000px;
height: 650px;
margin: 50px auto;
border: 1px solid teal;
}
.topBox {
margin: 0 auto 0px;
padding: 10px 0 20px;
background: teal;
color: #fff;
}
.dajianshi {
width: 98%;
height: 420px;
margin: 5px auto 0;
border:1px solid #369;
padding-top: 100px;
}
p{
font-size: 30px;}
</style>
In this example, 我们定义了三个过滤器：capitalize、currency 和 formatDate. capitalize is used to capitalize the first letter of text; currency is used to convert numbers to RMB format; formatDate is used to format date strings into local date formats. Then in the template, we applied these filters to the message, price, and date data attributes to implement the corresponding text processing functions.