Base
Similar a una directiva personalizada, se puede registrar un filtro personalizado con el método global vue.filter (), que toma dos parámetros: la ID del filtro y la función de filtro. La función de filtro toma el valor como un parámetro y devuelve el valor convertido:
Vue.filter ('reverse', function (valor) {return value.split (''). Inverso (). Join ('')})<
La función de filtro puede recibir cualquier número de parámetros:
Vue.filter ('wrap', function (value, begin, end) {return begin + value + end})<
Filtro bidireccional
Actualmente usamos filtros para convertir el valor del modelo antes de mostrarlo en la vista. Sin embargo, también es posible definir un filtro que convierta el valor de la vista (<put> elemento) antes de volver a escribirlo al modelo:
Vue.filter ('CurrencyDisplay', {// Model -> Ver // Formatear el valor antes de actualizar el `<put>` Element Read: function (val) {return '$' +val.tofixed (2)}, // ver -> model // formatear el valor antes de escribir la escritura de datos: function (val, Oldval) {var number = +val.RepLace (/[/d. '') return isnan (número)?Parámetros dinámicos
Si el parámetro del filtro no está envuelto en cotizaciones, se calculará dinámicamente dentro del alcance de VM actual. Además, esta de la función de filtro siempre apunta a la VM que lo llama. Por ejemplo:
<input v-model = "userInput"> <span> {{msg | Concat UserInput}} </span> Vue.filter ('concat', function (valor, entrada) {// `input` ===` this.userinput` value de retorno + entrada})El ejemplo anterior es relativamente simple, y también puede usar expresiones para lograr el mismo resultado, pero para una lógica más compleja, se requiere más de una declaración, y debe colocarla en una propiedad calculada o un filtro personalizado.
Filtros incorporados Filtros y matrices de filtro/clasificación de filtro/clasificación basadas en el estado actual de la instancia de Vue a la que pertenece.
Este artículo ha sido compilado en el "Tutorial de aprendizaje de componentes front-end Vue.js", y todos son bienvenidos a aprender y leer.
Para obtener tutoriales en los componentes Vue.js, haga clic en el tema especial Vue.js Component Learning Tutorial para aprender.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.