javascript - tutorial - Vuejs 2: cómo hacer que los datos sean minúsculos

vuejs change html title

Question

Estoy tratando de hacer algunos datos en minúsculas (siempre en minúsculas)

Hago y busco entradas como:

<template id="search">
    <div>
        <input type="text" v-model="search">
        <li v-show="''hello''.includes(search) && search !== ''''">Hello</li>
    </div>
</template>

Vuejs: (componente)

Vue.component(''search'', {
    template : ''#search'',
    data: function(){return{
        search : '''',
    }}
});

Intenté watch , pero no quiero que la entrada muestre minúsculas al escribir

watch: {
    ''search'' : function(v) {
        this.search = v.toLowerCase().trim();
    }
}

Demostración: https://jsfiddle.net/rgr2vnjp/

Y no quiero agregar .toLowerCase() en la lista de búsqueda v-show como:

<li v-show="''hello''.includes(search.toLowerCase()) && search !== ''''">Hello</li>

¿Algún truco? , Busqué y muchos dicen solo usan filter pero no salidas en Vuejs 2

Área de juegos: https://jsfiddle.net/zufo5mhq/ (Intente escribir H )

PD: código bueno / mejor que me gustaría saber también, gracias

Answer 1

En Vue.js 2.0, las propiedades calculadas se pueden usar para reemplazar filtros:

computed: {
  searchInLowerCase() {
    return this.search.toLowerCase().trim();
  }
}

Y ahora puedes simplemente usar searchInLowerCase en tu plantilla:

<li v-show="''hello''.includes(searchInLowerCase) && search !== ''''">Hello</li>