コードを書くときに、条件分岐は必須です。
その中で重要な役割を果たす「if」のコードのサンプルです。
<div id="myApp" class="demo_code"> <div v-if="type === 'A'"> Aが指定されてます </div> <div v-else-if="type === 'B'"> Bが指定されてます </div> <div v-else-if="type === 'C'"> Cが指定されてます </div> <div v-else> すべてに該当しません </div> <button v-on:click="push_a">A</button> <button v-on:click="push_b">B</button> <button v-on:click="push_c">C</button> </div>
JSの記述はこちら。
わかりやすいように、クリックによりメソッドが発動する簡単な例もいれてます。
var app = new Vue({ el: '#myApp', data: { type: 'A' }, methods: { push_a: function (event) { this.type = 'A' }, push_b: function (event) { this.type = 'B' }, push_c: function (event) { this.type = 'C' } } })
実行結果
Aが指定されてます
Bが指定されてます
Cが指定されてます
すべてに該当しません
クリックの部分を消してシンプルにすると、以下の記述で条件分岐のAの部分だけを実行するということになります。
var app = new Vue({ el: '#myApp', data: { type: 'A' } })
必ずこのように書かないといけないというわけではないので、ご参考までに。
書き方に間違いがあれば、随時更新していきます。