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