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>