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/

而且我不想在搜索列表 v-show 上添加 .toLowerCase()，例如：

<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()}}

Answer 3

理想情况下，您应该将所有逻辑放在一个 computed 中，这样您就可以清楚地将逻辑与 view/template 分开：

computed: {
  showHello() {
    const trimmedSearch = this.search.toLowerCase().trim()
    return 'hello'.includes(trimmedSearch) && this.search !== ''
  }
}

然后在您的模板中：

<li v-show="showHello">Hello</li>

Vuejs 2：如何使数据小写

Vuejs 2 : How to make data lowercase

javascript

lowercase

vue.js