En vue, al usar llaves dobles { {}} o enlace v-bind para generar el valor especificado (formato fijo), puede especificar un filtro para convertirlo al valor en el formato requerido. Por ejemplo: fecha.
1. Utilice filtros en el componente:
<!-- vue中的过滤器 -->
<div>过滤前：{
{ date }}</div>
<div>过滤后：{
{ date | formatDate }}</div>data() {
return {
date: new Date()
};
},
filters: {
formatDate(val) {
let newDate = ''
let year = val.getFullYear()
let month = val.getMonth() + 1
let day = val.getDate()
newDate = year + '-' + month + '-' + day
return newDate
}
}
2. Utilice filtros en js:
Vue.filter('formatDate', function (val) {})3. Los filtros se pueden conectar en serie:
filterA se define como una función de filtro que recibe un solo parámetro, y el valor del mensaje de expresión se pasará a la función como parámetro. Luego continúe llamando a la función de filtro filterB, que también está definida para recibir un solo parámetro, y pase el resultado de filterA a filterB
{
{ message | filterA | filterB }}4. Los filtros pueden recibir múltiples parámetros:
filterA se define como una función de filtro que recibe tres parámetros. El valor del mensaje se usa como primer parámetro, la cadena ordinaria 'arg1' se usa como segundo parámetro y el valor de la expresión arg2 se usa como tercer parámetro.
{
{ message | filterA('arg1', arg2) }}Lo anterior es el uso básico de filtros en vue. A través del filtro, se puede mejorar el consumo del código.