Vue.jsサンプルコード(11)ラベルをクリックして表示開閉とラベル変更を行う

11. ラベルをクリックして表示開閉とラベル変更を行う

  • Vue.jsバージョン: 2.5.2
  • 「もっと見る」ラベルをクリックするとコンテンツが表示されてラベルが「閉じる」に変更されます。
  • 「閉じる」ラベルをクリックするとコンテンツが閉じて「もっと見る」ラベルに戻ります。

サンプル


なお、「CONTENTS」というプレースホルダはplaceholder.comで表示しています(以前はplaceholder.itというドメインでしたが移転したようです)。フレキシブルなプレースホルダを簡単に利用できるので何かと便利です。

https://via.placeholder.com/256?text=CONTENTS


placeholder.comより

補足: const vmについて

これまでのサンプルコードではnew Vue()を変数宣言なしで、またはvar vm =に代入して使っているものがありましたが、今回はconst vm =を使っています。

const vm = new Vue({
    el: "#app",
    data: {a: false},
    computed: {
      label: function() { return this.a ? "閉じる" : "もっと見る" },
    },
  });

const
この宣言は、グローバルか、宣言された関数内ローカルな定数を作ります。定数は初期化が必須です。つまり、宣言された同じ文の中で値を指定しなくてはいけません (あとで変更できません)。
const 宣言は、値への読み取り専用の参照を作ります。その値が不変ということではなく、その変数識別子が再代入できないというだけです。たとえば、定数がオブジェクトの場合、オブジェクト自体は変更可能です。
MDN: constより

このサンプルコードは行きがかり上const宣言をトップレベルで行っている(この場合vmはグローバルになる)のと、宣言したvmをその後参照していないので、直接の意味はありませんが、サンプルコードをコピペして使ったときの影響を抑えるため、今後はconstletを使うようにしようと思います。

constletはブラウザによっては動かない可能性もあります。


バックナンバー(Vue.jsサンプルコード)

Vue.jsサンプルコード(01〜03)Hello World・簡単な導入方法・デバッグ・結果の表示とメモ化

Ruby on RailsによるWEBシステム開発、Android/iPhoneアプリ開発、電子書籍配信のことならお任せください この記事を書いた人と働こう! Ruby on Rails の開発なら実績豊富なBPS

この記事の著者

hachi8833

Twitter: @hachi8833、GitHub: @hachi8833 コボラー、ITコンサル、ローカライズ業界、Rails開発を経てTechRachoの編集・記事作成を担当。 これまでにRuby on Rails チュートリアル第2版の半分ほど、Railsガイドの初期翻訳ではほぼすべてを翻訳。その後も折に触れてそれぞれ一部を翻訳。 かと思うと、正規表現の粋を尽くした日本語エラーチェックサービス enno.jpを運営。 実は最近Go言語が好き。 仕事に関係ないすっとこブログ「あけてくれ」は2000年頃から多少の中断をはさんで継続、現在はnote.muに移転。

hachi8833の書いた記事

週刊Railsウォッチ

インフラ

BigBinary記事より

ActiveSupport探訪シリーズ