はじめに こんにちは！　松本　佑大（まつもと　ゆうだい）と申します！ 今回は条件分岐 v-if についてアウトプットしていきます！ V-ifとは 条件分岐v-ifを利用することによって要素に表示/非表示を切り替えることができます。 書き方 基本的な書き方は以下のようになります。 HTML <div id ="app"> <p v-if="toggle"> Good morning! </p> </div> Vue.js var app = new Vue({ el:'#app', data:{ toggle: true, } プロパティtoggle（任意）を定義し、真偽値trueorfalseを書きます。 （trueなら表示、falseなら非表示になります。） 次にp要素にvーifディレクティブを設定し、値にはプロパティtoggleを指定します。 上記にはtoggle:trueに指定してありますので、Good morning!が表示されています。 ※v-ifでは表示/非表示がdisplay:noneではなく、p要素そのものが削除される仕組みになっており、描画コストが高くなる恐れがあります。頻繁に表示/非表示を繰り返すのならばv-showディレクティブを使用することを推奨します。（別記事で解説します） まとめ ・要素にv-if="プロパティ"を指定。 ・data:{プロパティ:真偽値}を設置。 プロパティは任意になります！ 最後に 今回はv-ifについてアウトプットしました。 もし認識の仕方が間違っていましたら、コメント等頂けると幸いです。 今後ともQiitaにてアウトプットしていきます！

「HTML avstraction markup langage」が正式名称です。 マークアップ言語(HTML/XML)を生成する為のマークアップ言語です。 より短いコードで綺麗に簡潔にコードを書くことができます。 Hamlの書き方 基本記法 %タグ名でタグと閉じタグが生成されます。 正しくインデントをすることが必要です。 index.html.haml %ul %li Hello World! %li hoge hoge! htmlに変換すると↓ index.html <ul> <li>Hello World!</li> <li>hoge hoge!</li> </ul> 属性をつける 属性をつける場合は、 %タグ名{属性："値"}or%タグ名{:属性=>"値"} index.html.haml %ul %li %a{href: "https://muscle-meal-recipes.com"} Hello World! %li %a{:href => "https://muscle-meal-recipes.com"} hoge hoge! htmlに変換すると↓ index.html <ul> <li> <a href="https://muscle-meal-recipes.com">Hello World!</a> </li> <li> <a href="https://muscle-meal-recipes.com">hoge hoge!</a> </li> </ul> 省略記法 classとid よく使うclassとidについては省略することができます。 index.html.haml / class %p{class: "hogehoge"} クラスほげほげ %p.hogehoge クラスほげほげ / id %p{id: "hogehoge"} アイディーほげほげ %p#hogehoge アイディーほげほげ inde.html <p class="hogehoge">クラスほげほげ</p> <p class="hogehoge">クラスほげほげ</p> <p id="hogehoge">アイディーほげほげ</p> <p id="hogehoge">アイディーほげほげ</p> div divについても省略することができます。 index.html.haml / class %div{class: "hogehoge"} ディブほげほげ .hogehoge ディブほげほげ / id %div{id: "hogehoge"} ディブほげほげ #hogehoge ディブほげほげ inde.html <div class="hogehoge">ディブほげほげ</div> <div class="hogehoge">ディブほげほげ</div> <div id="hogehoge">ディブほげほげ</div> <div id="hogehoge">ディブほげほげ</div> 最後に 今回は、Haml記法についてご紹介しました。 間違え等あるかと思いますので、コメント等でご指摘願います。 最後まで読んでいただきありがとうございます。