if else ใน PugJs

| PugJS | 549 | 769 วันที่แล้ว
เรามาดู 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
982 D
[1]
Android
873 D
[40]
Animal
966 D
[1]
Apache
982 D
[2]
[10]
[2]
CMS-SMF
983 D
[1]
[3]
[1]
Database
982 D
[4]
[1]
Docker
877 D
[1]
Fruit
966 D
[2]
Git
769 D
[5]
HTML
769 D
[1]
Housework
971 D
[2]
IT
963 D
[2]
Imacro
983 D
[17]
Java
766 D
[1]
Java-Web
873 D
[1]
[2]
MQL5
795 D
[3]
MakeMoney
768 D
[18]
[1]
Maven
767 D
[1]
Mobile
980 D
[1]
NodeJs
768 D
[3]
Physics
764 D
[4]
PugJS
768 D
[2]
React
778 D
[132]
Science
965 D
[1]
[2]
Spring
767 D
[7]
[2]
[1]
[4]
Ubuntu
932 D
[1]
WebLogic
964 D
[4]