web-dev-qa-db-ja.com

Vue.js：大文字が機能しない

私はこのコードを持っています：

data: {
    cols: ['nome', 'data', 'size', 'ext'],
    items: []
},

テキストを大文字に変換する必要があります。公式サイトの例に従って、私はこの方法を試しました：

<th v-for="col in cols">
  {{col | uppercase}}
</th>

ただし、テキストは小文字のままです。なぜなのかご存知ですか？？

javascriptvue.jsuppercase
5
matteo

これを行うには、別の簡単な方法があります。フィルターに@wostexのアプローチを使用する代わりに、ダブルブラケット表記内で直接JavaScriptを使用できます。

new Vue({
  el: '#app',
  data: {
    cols: ['nome', 'data', 'size', 'ext']
  }
});
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <table>
    <thead>
      <th v-for="col in cols">
        {{ col.toUpperCase() }}
      </th>
    </thead>
  </table>
</div>
16
Kaung Myat Lwin

Vue.js sinse 2.xには組み込みフィルターがないため、フィルターを手動で定義する必要があります。

new Vue({
  el: '#app',
  data: {
    cols: ['nome', 'data', 'size', 'ext']
  },
  filters: {
    uppercase: function(v) {
      return v.toUpperCase();
    }
  }
});
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <table>
    <thead>
      <th v-for="col in cols">
        {{col | uppercase}}
      </th>
    </thead>
  </table>
</div>
12
Egor Stambakio

VueJS/Javascriptの実装を依頼されたのは承知していますが、私が最後にしたことも共有したいと思います。処理を節約するために、この部分にCSSを使用することを強くお勧めします。はい、私はVue=速度で最初の大文字のWord実装が重要であることを知っていますが、脳の電力を節約したい場合は、CSS text-transform: capitalize心配しているのはそのUIだけなので問題ありません。ここにいくつかの参照があります https://www.w3schools.com/cssref/pr_text_text-transform.asp

1
Jovanni G