Vue.jsでテキストを切り替えたいときに悩んだこと

テキストを変数の内容によって切り替えたい

前回の、Vue.jsでメニュー 切り替えに機能を追加していきます。

メニューを開く/閉じるボタンを作りたい！
ボタンのテキスト表示もメニューを開く/閉じると切り替えたかった。
試行錯誤した記録。途中途中に「ほーん」となることがあった。

データとメソッドを準備した

絶対もっといいメソッドの書き方があるだろうと思いながら書いた。

<script>
    export default {
        components: {},
        data: function () {
            return {
                openMenu:false
            }
        },
        methods: {
            open:function(){
                if(this.openMenu ===false){
                    this.openMenu = true
                }else{
                    this.openMenu = false
                }
            }
        }
    }
</script>

問題のbuttonタグ

自力で考えたもの

<template>
<button v-if:openMenu = false>メニューを開く</button>
<button v-if:openMenu = true>メニューを閉じる</button>
</template>

やりたいことはこれだけど、buttonタグ２個もあるのなんか変！他にもあるはず！

「ほーん」ポイント１

<template>
<button v-on:click="openMenu =!openMenu"> //これはスマート。すぐに出てこない
</template>

!を使って切り替えるのはスマート。もはやメソッドは要らなかった！！！
確かに！と納得したはいいけど、テキストの切り替えがわからん

「ほーん」ポイント２

<template>
      <button v-on:click="openMenu =!openMenu">
          <template v-if="openMenu === false">メニューを開く</template>
          <template v-else>メニューを閉じる</template>
      </button>
</template>

!!!まさかのテキストのところにまた<template></template>が書けるなんて驚き。
まだ自分で活用できるかは微妙だけど、覚えておきたい。

「ほーん」ポイント３

<template>
    <button v-on:click="openMenu =!openMenu">
        {{ openMenu ? 'メニューを閉じる': 'メニューを開く' }}
    </button>
</template>

シンプルイズベストって感じがしますね。
?は三項演算子というらしい。

{真偽値?〇〇:✕✕}

?の前がtrueかfalseかによって:で分けられた値を返すんだそうな。
tureなら左側、falseなら右側。。。
すごい！

感想

いろんな書き方があるんだなぁ、、