vueのcomputedについて

computedの動きについて

computedの動きがわからなかったので、自分用メモとして残すために簡単なvueのページを作成しました。
作成したのは入力された小文字を大文字に変換して出力されるといった簡単なものになります。

まずは、全体のソースです。

top.vue

<template>
  <div class="hello">
    <h1>小文字→大文字</h1>
    <input v-model="lowerCase"/>→
    <input :value="upperCase" readonly/>

  </div>
</template>

<script>
export default {
  //要素を定義しないと要素をいじれないから定義した方が良いよ
  data() {
    return {
      //stringにnullはやめよう
      //nullは文字ではないから
      lowerCase: '',
    }
  },
  //要素いじりたいときに使うといいよ。ベタ書きすると可読性が落ちちゃうからね
  computed: {
    //今回のページの命のファンクションだよ
    //要素lowerCaseを大文字に変換してくれいるよ。
    upperCase() {
      return this.lowerCase.toUpperCase();
    }
  }
}
</script>

<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>

##プログラムの説明をします。

script

<script>
export default {
  //要素を定義しないと要素をいじれないから定義した方が良いよ
  data() {
    return {
      //stringにnullはやめよう
      //nullは文字ではないから
      lowerCase: '',
    }
  },
  //要素いじりたいときに使うといいよ。ベタ書きすると可読性が落ちちゃうからね
  computed: {
    //今回のページの命のファンクションだよ
    //要素lowerCaseを大文字に変換してくれいるよ。
    upperCase() {
      return this.lowerCase.toUpperCase();
    }
  }
}
</script>

説明を終わります。

##作ったもの
大

公開大

##参考資料
toUpperCaseの使い方
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase

vue.js公式サイト
https://jp.vuejs.org/index.html

##終わり