if else ใน PugJs

| PugJS | 368 | 545 วันที่แล้ว
เรามาดู if else ใน Pug Js กันครับ ซึ่งแน่นอนว่า เป็นอะไรที่ใช้บ่อยเหมือนกันนะ ไปดูตัวอย่างการใช้ if แบบง่าย ๆ กันครับ ตามตัวอย่างโค้ด

div
	- var userHowto = 'howtoclicks'
	- var isHowto = false
	- var passHowto = ''

	if userHowto
		div IN IF USERHOWTO

	if isHowto
		div IN IF ISHOWTO

	if passHowto
		div IN IF PASSHOWTO

	if asdfasdf
		div IN IF ASDFASDF
เมื่อรันแล้ว จะได้ผลลัพธ์ ดังนี้
<div><div>IN IF USERHOWTO</div></div>
จากโค้ด เรามีตัวแปร 3 ตัว คือ userHowto isHowto passHowto จากนั้นเราก็ใช้ If แต่ละตัว ตัวแรกมีค่าอยู่ ดังนั้นเมื่อเราใช้ if จะทำให้เป็น true จากนั้นตัวแปรที่สองมีค่าเป็น false อยู่แล้ว ดังนั้นเมื่อ if จึงทำให้ไม่แสดง div จากนั้นตัว passHowto มีค่าเป็นค่าว่าง เมื่อเรา if ก็ได้ เป็น false ซึ่งต่างจาก userHowto ที่มีค่าจึงเป็น true และก็ตัวสุดท้าย ใส่ชื่อตัวแปรมั่ว ๆ ไป แต่เราไม่ได้กำหนดตัวแปรนี้ จึงได้ค่า false
div
	- var userHowto = 'howtoclicks'
	- var isHowto = false
	- var passHowto = ''

	if userHowto
		div IN IF USERHOWTO
	else
		div IN ELSE USERHOWTO

	if isHowto
		div IN IF ISHOWTO
	else
		div IN ELSE ISHOWTO

	if passHowto
		div IN IF PASSHOWTO
	else if passHowto == ''
		div IN ELSE IF PASSHOWTO
	else
		div IN ELSE PASSHOWTO

	if asdfasdf
		div IN IF ASDFASDF
	else
		div IN ELSE ASDFASDF
เมื่อรันแล้วจะได้
<div><div>IN IF USERHOWTO</div><div>IN ELSE ISHOWTO</div><div>IN ELSE IF PASSHOWTO</div><div>IN ELSE ASDFASDF</div></div></div>
unless pug ยังได้กำหนด unless ไว้ให้ด้วย ซึ่งเป็น condition ที่เป็นส่วนกลับของ if เราลองไปใช้กันดูครับ
div
	- var userHowto = 'howtoclicks'
	- var isHowto = false
	- var passHowto = ''

	unless userHowto
		div IN UNLESS USERHOWTO

	unless isHowto
		div IN UNLESS ISHOWTO

	unless passHowto
		div IN UNLESS PASSHOWTO

	unless asdfasdf
		div IN UNLESS ASDFASDF
จะได้ผลลัพธ์เป็น IN UNLESS ISHOWTO IN UNLESS PASSHOWTO IN UNLESS ASDFASDF ซึ่งโค้ด unless ข้างบน ถ้าเราเปลี่ยนมาใช้ if ก็จะได้ ประมาณนี้
div
	- var userHowto = 'howtoclicks'
	- var isHowto = false
	- var passHowto = ''

	if !userHowto
		div IN NOT IF USERHOWTO

	if !isHowto
		div IN NOT IF ISHOWTO

	if !passHowto
		div IN NOT IF PASSHOWTO

	if !asdfasdf
		div IN NOT IF ASDFASDF
comments

[1]
Adobe-PDF
758 D
[1]
Android
649 D
[40]
Animal
742 D
[1]
Apache
758 D
[2]
[10]
[2]
CMS-SMF
759 D
[1]
[3]
[1]
Database
758 D
[4]
[1]
Docker
654 D
[1]
Fruit
742 D
[2]
Git
545 D
[5]
HTML
545 D
[1]
Housework
747 D
[2]
IT
739 D
[2]
Imacro
759 D
[17]
Java
542 D
[1]
Java-Web
649 D
[1]
[2]
MQL5
571 D
[3]
MakeMoney
544 D
[18]
[1]
Maven
543 D
[1]
Mobile
756 D
[1]
NodeJs
544 D
[3]
Physics
540 D
[4]
PugJS
544 D
[2]
React
554 D
[132]
Science
741 D
[1]
[2]
Spring
543 D
[7]
[2]
[1]
[4]
Ubuntu
709 D
[1]
WebLogic
740 D
[4]