if else ใน PugJs

| PugJS | 602 | 841 วันที่แล้ว
เรามาดู 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
1053 D
[1]
Android
945 D
[40]
Animal
1038 D
[1]
Apache
1053 D
[2]
[1]
[10]
CMS-Joomla
1054 D
[2]
CMS-SMF
1054 D
[1]
[3]
[1]
Database
1053 D
[4]
[1]
Docker
949 D
[1]
Fruit
1038 D
[2]
Git
840 D
[5]
HTML
840 D
[1]
Housework
1042 D
[2]
IT
1034 D
[2]
Imacro
1054 D
[17]
Java
838 D
[1]
Java-Web
945 D
[1]
[2]
MQL5
866 D
[3]
MakeMoney
840 D
[18]
[1]
[1]
Maven
839 D
[5]
[1]
Mobile
1051 D
[1]
NodeJs
840 D
[3]
Physics
835 D
[4]
PugJS
840 D
[2]
React
850 D
[132]
Science
1037 D
[1]
[2]
Spring
839 D
[12]
[7]
[2]
[1]
[4]
Ubuntu
1004 D
[1]
WebLogic
1035 D
[4]