【Nuxt.js】Nuxt文法編：computed

8133 ワード
Vue.js コンポーネント JavaScript nuxt.js JavaScript テキストリンク

🎈 この記事はWP専用です
https://wp.me/pc9NHC-wY

前置き

今回はcomputed🌟
getter関数とsetter関数が使える
算出プロパティです！

簡単な使い方や
methodsとの違いを解説しています🙋‍♀️

computed

簡単な使い方

テキストを反転させます🎈

【index.vue】
プロパティなので呼び出す際は
{{ reversedMessage() }}
ではなく
{{ reversedMessage }}
でOKです🌟

index.vue
<template>
 <div class="page">
   <p>message: {{ message }}</p>
   <p>reversed message: {{ reversedMessage }}</p>
 </div>
</template>

<script>
export default {
 data () {
   return {
     message: 'Hello Nuxt.js!',
   }
 },
 computed: {
   reversedMessage () {
     return this.message.split('').reverse().join('')
   },
 },
}
</script>

methodsを使った場合のコード

呼び出す物が関数になるので
{{ reversedMessage() }}

index.vue
<template>
 <div class="page">
   <p>message: {{ message }}</p>
   <p>reversed message: {{ reversedMessage() }}</p>
 </div>
</template>

<script>
export default {
 data () {
   return {
     message: 'Hello Nuxt.js!',
   }
 },
 methods: {
   reversedMessage () {
     return this.message.split('').reverse().join('')
   },
 },
}
</script>

thisコンテキストを使う

thisコンテキストが使えます。
this.messageを平仮名にしてみます。

index.vue
<template>
 <div class="page">
   <p>message: {{ message }}</p>
   <p>reversed message: {{ reversedMessage }}</p>
 </div>
</template>

<script>
export default {
 data () {
   return {
     message: 'Hello Nuxt.js!',
   }
 },
 computed: {
   reversedMessage () {
     let message = this.message = 'あいうえお'
     return message.split('').reverse().join('')
   },
 },
}
</script>

methodsとの違い

computedはプロパティ
methodsはメソッドなので
そもそも土台が違うのですが
似ていますよね👭

🎈 続きはWPでご覧ください👀
https://wp.me/pc9NHC-wY