Base
Semelhante a uma diretiva personalizada, um filtro personalizado pode ser registrado no método global Vue.Filter (), que leva dois parâmetros: o ID do filtro e a função do filtro. A função do filtro toma o valor como um parâmetro e retorna o valor convertido:
Vue.filter ('reverso', função (value) {return value.split (''). Reverse (). Junção ('')})<!-'abc' => 'cba'-> <span v-text = "message | reverse"> </span>
A função de filtro pode receber qualquer número de parâmetros:
Vue.filter ('wrap', função (valor, início, fim) {return inicie + valor + end})er
Filtro bidirecional
Atualmente, usamos filtros para converter o valor do modelo antes de exibi -lo na visualização. No entanto, também é possível definir um filtro que converte o valor da visualização (elemento <input>) antes de escrevê -lo de volta ao modelo:
Vue.filter('currencyDisplay', { // model -> view // Format the value before updating the `<input>` element read: function(val) { return '$'+val.toFixed(2) }, // view -> model // Format the value before writing back the data write: function(val, oldVal) { var number = +val.replace(/[^/d.]/g, '') retornar isnan (número)?Parâmetros dinâmicos
Se o parâmetro do filtro não estiver envolvido em cotações, ele será calculado dinamicamente no escopo da VM atual. Além disso, essa da função de filtro sempre aponta para a VM que a chama. Por exemplo:
<input v-model = "userInput"> <pan> {{msg | concat userInput}} </span> Vue.filter ('concat', function (valor, entrada) {// `input` ===` this.UserInput` Valor de retorno + entrada})O exemplo acima é relativamente simples e você também pode usar expressões para alcançar o mesmo resultado, mas para lógica mais complexa, é necessário mais de uma instrução e você precisa colocá -lo em uma propriedade calculada ou em um filtro personalizado.
Filtros internos Filterby e OrderBy Filter/classificar matrizes recebidas com base no estado atual da instância VUE à qual ele pertence.
Este artigo foi compilado no "Tutorial de aprendizado de componentes de front-end Vue.js", e todos são convidados a aprender e ler.
Para tutoriais nos componentes vue.js, clique no tutorial de aprendizado de componentes do Tópico Especial Vue.js para aprender.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.