NEW ARTICLE
Rubyのメタプログラミングを極める：コードを自在に操る技術
  1. HOME
  2. Vue.js
  3. Vue.js Filtersの簡単な使い方

Vue.js Filtersの簡単な使い方

Vue.js Filtersの簡単な使い方

vue.jsのFiltersを利用して、小文字を全て大文字に変換する簡単なサンプルコードです。

目次

環境

  • OS  CentOS 8.0.1905 (Core)
  • node v12.13.1
  • npm 6.13.2
  • @vue/cli 4.1.1

プロジェクト作成

vueappという名前でプロジェクトを作成してます。

vue create vueapp

defaultを選択してます

Vue CLI v4.1.1
? Please pick a preset: default (babel, eslint)

filters使い方

filtersを利用して、小文字を全て大文字に変換します。

src/components配下のHelloWorld.vueを下記のように編集します

<template>
  <div class="hello">
    <h1>{{ msg | uppercase }}</h1>    
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  filters: {
    uppercase: function (value) {
        return value.toUpperCase()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

ブラウザから http://プライベートIP:8080にアクセスすると、 HelloWorld コンポーネントの「 Welcome to Your Vue.js App 」が全て大文字変換されます。

全てのコンポーネントで利用する場合は、src配下のmain.jsを下記のように編集します

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

Vue.filter("uppercase", function(value) {
  return value.toUpperCase()
});

new Vue({
  render: h => h(App),
}).$mount('#app')