ไดเรกทีฟ v-else-if ใน Vue
แทนที่จะใช้ v-if หลายตัว สามารถใช้โครงสร้าง
v-else-if ได้:
<template>
<p v-if="num == 1">one</p>
<p v-else-if="num == 2">two</p>
<p v-else-if="num == 3">three</p>
<p v-else>error</p>
</template>
ให้ใน data เก็บข้อมูลต่อไปนี้:
data() {
age: 25,
}
หากคุณสมบัติ age น้อยกว่า 18 - ให้แสดง
บนหน้าจอว่า 'วัยรุ่น', หากมีค่าตั้งแต่
19 ถึง 25 - ให้แสดงบนหน้าจอว่า 'คนหนุ่มสาว'
, และหากมากกว่า 26 - ให้แสดงบนหน้าจอว่า
'ผู้ชาย'