if else ใน PugJs

| PugJS | 312 | 487 วันที่แล้ว
เรามาดู 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
700 D
[1]
Android
591 D
[40]
Animal
684 D
[1]
Apache
700 D
[2]
[10]
[2]
CMS-SMF
701 D
[1]
[3]
[1]
Database
700 D
[4]
[1]
Docker
595 D
[1]
Fruit
684 D
[2]
Git
487 D
[5]
HTML
487 D
[1]
Housework
689 D
[2]
IT
681 D
[2]
Imacro
701 D
[17]
Java
484 D
[1]
Java-Web
591 D
[1]
[2]
MQL5
513 D
[3]
MakeMoney
486 D
[18]
[1]
Maven
485 D
[1]
Mobile
698 D
[1]
NodeJs
486 D
[3]
Physics
482 D
[4]
PugJS
486 D
[2]
React
496 D
[132]
Science
683 D
[1]
[2]
Spring
485 D
[7]
[2]
[1]
[4]
Ubuntu
650 D
[1]
WebLogic
682 D
[4]