Vuejs 2:如何使数据小写

Question

我试图将一些数据设为小写(总是小写)

我制作和搜索输入如下:

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

Vuejs :(组件)

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

---

我试过了watch,但是我不希望输入时输入显示小写

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

演示: https ://jsfiddle.net/rgr2vnjp/

---

我不想.toLowerCase()在搜索列表上添加v-show如下:

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

---

任何诡计？,我搜索过,很多人告诉我们使用filter但不会退出Vuejs 2

游乐场: https ://jsfiddle.net/zufo5mhq/(尝试输入H)

PS:好的/更好的代码我也想知道,谢谢

Answer 1

在Vue.js 2.0中,计算属性可用于替换过滤器:

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

现在您只需searchInLowerCase在模板中使用:

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

Answer 2

你甚至可以做到这一点

{{tag.title.toLowerCase().trim()}}