Vuejs 2:如何使数据小写 [英] Vuejs 2 : How to make data lowercase

问题描述

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

I trying to make some data to lowercase (alway lowercase)

我制作和搜索输入如下:

I making and search input like :

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

</模板>

Vuejs : (component)

Vuejs:(组件)

I tried watch, But I dont want input showing lowercase when typing

<小时>

我试过watch，但我不想输入时输入显示小写

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

Demo : https://jsfiddle.net/rgr2vnjp/

演示: https://jsfiddle.net/rgr2vnjp/><小时>

而且我不想在搜索列表 v-show 上添加 .toLowerCase() 像:

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

<小时>

有什么技巧吗?，我搜索过，很多人告诉我只使用 filter 而不是在 Vuejs 2 上退出

---

Any trick?, I searched and many tell just use filter but not exits on Vuejs 2

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

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

推荐答案

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

In Vue.js 2.0, computed properties can be used to replace filters:

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

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

And now you can simply use searchInLowerCase in your template:

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

这篇关于Vuejs 2:如何使数据小写的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！