การแสดงผล/การแสดงผลแบบมีเงื่อนไขใน Vue ด้วย v-if, v-show, v-else และ v-else-if

บทนำ

Vue.js เป็นเฟรมเวิร์กเว็บแอปอย่างง่ายสำหรับการสร้างเว็บอินเตอร์เฟสแบบไดนามิกและ แอปหน้าเดียว (SPA). เมื่อเราสร้างแอปเหล่านี้ บ่อยครั้ง เราต้องการ แสดงผลบางอย่างตามเกณฑ์เฉพาะ – นี่คือสาระสำคัญของการเรนเดอร์แบบมีเงื่อนไข

การแสดงผลตามเงื่อนไขหมายถึงความสามารถในการแสดงมาร์กอัปส่วนติดต่อผู้ใช้ (UI) ที่แตกต่างกันโดยพิจารณาจากเงื่อนไขว่าเป็นจริงหรือไม่ แนวคิดนี้มักใช้ในบริบทต่างๆ เช่น การแสดงหรือซ่อนส่วนประกอบ (การสลับ) การสลับการทำงานของแอปพลิเคชัน การจัดการการรับรองความถูกต้องและการอนุญาต และอื่นๆ อีกมากมาย

ในบทความนี้ เราจะมาดูวิธีการเรนเดอร์แบบมีเงื่อนไขแบบต่างๆ ใน ​​Vue.js โดยใช้คำสั่ง v-if, v-else-ifและ v-else คำสั่ง เราจะดูตัวอย่างบางส่วนและเน้นความแตกต่างระหว่าง v-if และ v-show.

วี-if

พื้นที่ v-if คำสั่งใช้เพื่อ สร้างเงื่อนไขบล็อก หมายถึงบล็อกที่มี v-if แอตทริบิวต์จะเป็น .เท่านั้น ผลิต ถ้านิพจน์ของคำสั่งส่งกลับ a true ค่า. หากนิพจน์ให้ผลลัพธ์ที่ไม่ถูกต้อง (เช่น null, 0, สตริงว่าง, false) องค์ประกอบคือ ลบ จากโดม

มาอธิบายพฤติกรรมนี้ในตัวอย่างที่ใช้ได้จริงกัน:

<div v-if="login"> <p>This user has been logged in!... Welcome.</p>
</div> <script>
export default { data() { return { login: true, }; }
};
</script>

ตั้งแต่ login ถูกตั้งค่าเป็น trueที่ <div> บล็อกที่มี v-if คำสั่งจะถูกผลิตขึ้นจึงแสดงออกมา

วี-if vs วีโชว์

เป็นที่น่าสังเกตว่า v-show จะยังทำงานในตัวอย่างด้านบนและจะทำงานเหมือนกัน แต่มีความแตกต่างระหว่างทั้งสอง

v-if ทำให้มีเงื่อนไข องค์ประกอบในขณะที่ v-show แสดงแบบมีเงื่อนไข/แสดง องค์ประกอบ

นี่หมายความว่าเมื่อมีการสลับเงื่อนไข v-if จะลบและกู้คืนส่วนประกอบจริง ๆ v-show เพียงทำให้พวกเขามองไม่เห็นหรือมองเห็นได้ ภาพเคลื่อนไหวต่อไปนี้แสดงให้เห็นว่า v-if จริง ๆ แล้วลบและสร้างบล็อคโค้ด:

ในขณะเดียวกัน v-show จะรักษาองค์ประกอบใน DOM ไว้เสมอ และเพียงแค่เปลี่ยน CSS เพื่อสลับลักษณะที่ปรากฏ (โดยการตั้งค่าของมัน display ไปยัง none):

v-อื่น

พื้นที่ v-else คำสั่งคือ v-if คำสั่งที่ให้คุณปรับแต่ง false ค่าในการแสดงผลแบบมีเงื่อนไข ถ้าไม่ใช่ true, คุณสามารถใช้ได้ v-else เพื่อกำหนดสิ่งที่ควรเกิดขึ้นแทน

ตัวอย่างเช่น สมมติว่าเรามีการป้อนรหัสผ่าน และเราต้องการให้สร้างข้อความแสดงข้อผิดพลาด “รหัสผ่านที่อ่อนแอ”, หากความยาวของอินพุตน้อยกว่า 6 หรือ display “รหัสผ่านที่แข็งแกร่ง” ถ้าความยาวมากกว่า 6

นี่คือการแสดงผลแบบมีเงื่อนไข โดยมีตัวเลือกสำหรับการจัดการกรณีเท็จ:

<form> <input type="password" v-model="password" placeholder="Enter your password" /> <p v-if="password.length > 6">Strong Password</p> <p v-else>Weak Password</p>
</form> <script>
export default { data() { return { password: "" }; }
};
</script>

ลองใช้สิ่งนี้เพื่อสลับเนื้อหาของหน้าการเข้าสู่ระบบอย่างง่าย เพื่อให้มันเปลี่ยนข้อความโดยขึ้นอยู่กับว่าผู้ใช้เข้าสู่ระบบหรือไม่ เราจะแก้ไขถ้อยคำของปุ่มตาม userLoggedIn สถานะเช่นกัน:

<div id="app"> <div v-if="userLoggedIn"> <h2>Hello Welcome!</h2> <p>You have sucessfully logged in to your user account!</p> </div> <div v-else> <p>Please Log In to access your account!</p> </div> <button @click="userLoggedIn = !userLoggedIn"> <p v-if="!userLoggedIn">Login</p> <p v-else>LogOut</p> </button>
</div> <script>
export default { data() { return { userLoggedIn: false }; }
};
</script>

เหตุการณ์การคลิกปุ่มจะสลับ userLoggedIn รายการข้อมูล ซึ่งจะส่งผลต่อข้อมูลที่แสดงด้านล่าง:

v-อื่น-if

v-else-if extends a v-if ด้วย else...if บล็อก. ซึ่งคล้ายกับ JavaScript's else...if บล็อกเพื่อให้เราสามารถเพิ่มคำสั่ง if ให้กับที่มีอยู่ v-if. ใช้เมื่อมีเกณฑ์หลายเกณฑ์ในการตรวจสอบและสามารถผูกมัดได้หลายครั้ง:

<form> <input type="password" v-model="password" placeholder="Enter your password" /> <p v-if="password.length < 4">Weak Password</p> <p v-else-if="password.length < 7">Fairly Strong Password</p> <p v-else>Strong Password</p>
</form> <script>
export default { data() { return { password: "" }; }
};
</script>

สรุป

ในบทความนี้ เราได้เห็นวิธีการแสดงองค์ประกอบด้วย v-if, v-elseและ v-else-if. นอกจากนี้เรายังอธิบายความแตกต่างระหว่าง v-if และ v-show.

• คอยน์สมาร์ท การแลกเปลี่ยน Bitcoin และ Crypto ที่ดีที่สุดในยุโรป
• เพลโตบล็อคเชน Web3 Metaverse ข่าวกรอง ขยายความรู้. เข้าฟรี
• คริปโตฮอว์ก เรดาร์ Altcoin ทดลองฟรี.
• ที่มา: https://stackabuse.com/conditional-rendering-in-vue-with-v-if-v-show-v-else-and-v-else-if/