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：好/更好的代码我也想知道，谢谢

原文由 l2aelba 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

现在您可以在模板中简单地使用 searchInLowerCase ：

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

原文由 CodinCat 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

你甚至可以这样做

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

原文由 Mir Adnan 发布，翻译遵循 CC BY-SA 3.0 许可协议