web-dev-qa-db-ja.com

Vuejs 2：データを小文字にする方法

一部のデータを小文字にしようとしています（常に小文字）

私は次のような入力を行い、検索します：

_<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：私も知りたい良い/より良いコード、ありがとう

javascriptvue.jslowercase
7
l2aelba

Vue.js 2.0では、計算されたプロパティを使用してフィルターを置き換えることができます。

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

そして今あなたはあなたのテンプレートで単にsearchInLowerCaseを使うことができます：

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

あなたもこれを行うことができます

{{tag.title.toLowerCase().trim()}}
9
Mir Adnan