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中，计算属性可用于替换过滤器：

<button class="g-recaptcha" data-sitekey="my site key" data-callback='sendEmailMsg()'>Submit</button>

现在您只需在模板中使用computed: { searchInLowerCase() { return this.search.toLowerCase().trim(); } }：

searchInLowerCase

Answer 2

你甚至可以这样做

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

Answer 3

理想情况下，您应该将所有逻辑放在computed中，以便清楚地将逻辑与视图/模板分开：

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

然后在您的模板中：

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

Vuejs 2：如何使数据小写

3 个答案: