Javascript Vuejs 2：如何使数据小写

我试图将一些数据转换为小写（总是小写）

我制作和搜索输入，如：

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

---

我尝试了

watch

，但我不希望输入在键入时显示小写

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

演示：

---

我不想在搜索列表

v-show

中添加

.toLowerCase（）

，比如：

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

hello

---

有什么把戏吗？，我搜索了一下，很多人告诉我只使用

过滤器

，而不是VueJS2上的出口

操场：（尝试键入H）

---

PS：好的/更好的代码我也想知道，谢谢Vue.js 2.0中的计算属性可以用来替换过滤器：

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

现在，您只需在模板中使用

searchInLowerCase

：

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

hello

您甚至可以这样做

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

---

理想情况下，您应该将所有逻辑放在一个

计算的
，以便将逻辑与视图/模板明确分开：

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

计算：{
showHello（）{
const trimmedSearch=this.search.toLowerCase（）.trim（）
返回“hello”。包括（trimmedSearch）和&this.search！=''
}
}

然后在模板中：

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

你好
Ahaaa！非常感谢您对饰件进行了小小的改进（）。您可以将其作为：v-model.trim=“modelName”直接放到模板中