コードを書くときに、条件分岐は必須です。
その中で重要な役割を果たす「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'
}
})
必ずこのように書かないといけないというわけではないので、ご参考までに。
書き方に間違いがあれば、随時更新していきます。
