今回はjQueryでもよくやる表示・非表示を切り替えるものをVue.jsでもやります。
また、コンポーネントの話にも進みたかったので今回はVue.jsのコンポーネントをCDN版のVue.jsで実施するという内容も含みます。

前回までの記事

画面

jQueryの場合

HTMLのBODY部分は以下の通りです。

<div class="container">
    <div class="mt-5"></div>
    <div class="card">
        <div class="card-header">
            jQueryの場合
        </div>
        <div class="card-body">
            <div class="form-group">
                <button class="btn btn-primary" id="toggleButton">非表示にする</button>
            </div>
            <h5 class="card-title">値を反映</h5>
            <div id="result">
                <p>表示中！！</p>
            </div>
        </div>
    </div>
</div>

id="toggleButton"とIDが振られたbuttonを用意してます。
そのボタンが押されたら「表示する」⇔「非表示にする」を交互に入れ替えます。
また、<div id="result">内の文字列を「表示中！！」と無し状態を入れ替えます。

javascriptは以下の様にします。

<script>
  $("#toggleButton").click(function() {
    if ($("#toggleButton").html() === "表示する") {
      $("#toggleButton").html("非表示にする");
      $("#result").append("<p>表示中！！</p>");
    } else {
      $("#toggleButton").html("表示する");
      $("#result").empty();
    }
  });
</script>

$("#toggleButton").click()でボタンがクリックされたイベントをトリガーに、現在ボタンの文字列が何になってるかを確認してボタンの表示内容と<div id="result">を切り替えるようにしています。

Vue.jsの場合

HTMLのBODY部分は以下の通りです。

<div class="container">
    <div class="mt-5"></div>
    <div class="card" id="vue">
        <div class="card-header">
            Vue.jsの場合
        </div>
        <div class="card-body">
            <div class="form-group">
                <button class="btn btn-primary" @click="toggle">
                    <div v-if="mode">
                        非表示にする
                    </div>
                    <div v-else>
                        表示する
                    </div>
                </button>
            </div>
            <h5 class="card-title">値を反映</h5>
            <div id="result">
                <result :mode="mode"></result>
            </div>
        </div>
    </div>
</div>

javascriptの部分は以下の通りです。

<script>
    Vue.component('result', {
        props: {"mode": Boolean},
        template: `
            <p>{{ getDispValue }}</p>
        `,
        computed: {
            getDispValue: function(){
                if(this.mode){
                    return "表示中！！";
                }else{
                    return "";
                }
            }
        }
    });
    new Vue({
        el: "#vue",
        data: {
            mode: true
        },
        methods: {
            toggle(){
                this.mode = !this.mode;
            }
        }
    });
</script>

今回はVueのコンポーネントでテンプレートを作成しています。

Vue.component('result', {
    props: {"mode": Boolean},
    template: `
        <p>{{ getDispValue }}</p>
    `,
    computed: {
        getDispValue: function(){
            if(this.mode){
                return "表示中！！";
            }else{
                return "";
            }
        }
    }
});

propsでコンポーネントが外部から値を受け取る値を指定
- 今回はmodeという表示を制御するBooleanを受け取ってます
templateがテンプレートの中身です
- 今回は<p>{{ getDispValue }}</p>としてます
- {{}}で囲う箇所はVueで値を埋め込む際のお約束です
computedは前回登場した 算出プロパティ です
- getDispValueがpropsで受け取ったmodeから判断して「表示中！！」を返却するか空を返却するか行ってます

new Vue({
    el: "#vue",
    data: {
        mode: true
    },
    methods: {
        toggle(){
            this.mode = !this.mode;
        }
    }
});

Vueのインスタンスを作ってる箇所で
- dataにmodeを持ってます
- methodsにはtoggle()という関数を持ってます
  - このtoggle()はHTML側でボタンに@click="toggle"としてる箇所から呼ばれます

まとめ

今回Vue側のコンポーネントは超ライトな内容にしてるのでコンポーネントのメリットは感じにくいかもしれないです。この程度であれば確かにjQueryで書いたほうが直感的にできてる気がします。ただ、コンポーネント化のメリットは繰り返し同じような表示を行う必要があるときに真価が発揮されるので、繰り返し同じようなボタン制御があるとjQueryの場合はボタンと表示領域のID管理が必要になってくるので重複コードが生まれやすいですが、Vueの場合はコンポーネント内に処理を内包できるのでメンテナンス性の向上も見込めるはずです。

補足

HTML5からtemplateが追加されています。（※参考）
ただしIEはこのtemplateに対応はしていないです。
だからVueのほうがいいのかというとIE11はES5までしか対応できてないのも事実です。（※参考）
なのでIE11のように古いブラウザをサポートするのであればjavascriptの書き方をES5に合わせる、BabelやWebPackのようなトランスパイルを行うなどが必要になってきます。
開発する規模がどれくらいかによってjQueryのほうがいいかもしれないですし、サポートブラウザを明確にしてIE11を捨てるという方法がいいかもしれないですし、トランスパイルしてIE11サポートを頑張る方法もあると思います。

今回は以上です。

jQueryとVue.jsの比較（表示・非表示＋コンポーネント）

前回までの記事

画面

jQueryの場合

Vue.jsの場合

まとめ

補足