if else ใน PugJs

| PugJS | 441 | 635 วันที่แล้ว
เรามาดู 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
848 D
[1]
Android
739 D
[40]
Animal
832 D
[1]
Apache
848 D
[2]
[10]
[2]
CMS-SMF
849 D
[1]
[3]
[1]
Database
847 D
[4]
[1]
Docker
743 D
[1]
Fruit
832 D
[2]
Git
635 D
[5]
HTML
635 D
[1]
Housework
837 D
[2]
IT
829 D
[2]
Imacro
849 D
[17]
Java
632 D
[1]
Java-Web
739 D
[1]
[2]
MQL5
661 D
[3]
MakeMoney
634 D
[18]
[1]
Maven
633 D
[1]
Mobile
846 D
[1]
NodeJs
634 D
[3]
Physics
630 D
[4]
PugJS
634 D
[2]
React
644 D
[132]
Science
831 D
[1]
[2]
Spring
633 D
[7]
[2]
[1]
[4]
Ubuntu
798 D
[1]
WebLogic
830 D
[4]