VueJS - การแสดงผล
ในบทนี้เราจะเรียนรู้เกี่ยวกับการแสดงผลตามเงื่อนไขและการแสดงรายการ ในการแสดงผลตามเงื่อนไขเราจะพูดถึงการใช้ if, if-else, if-else-if, show ฯลฯ ในการแสดงรายการเราจะพูดถึงวิธีการใช้สำหรับลูป
การแสดงผลตามเงื่อนไข
เริ่มต้นและทำงานกับตัวอย่างก่อนเพื่ออธิบายรายละเอียดสำหรับการแสดงผลตามเงื่อนไข ด้วยการเรนเดอร์ตามเงื่อนไขเราต้องการเอาต์พุตก็ต่อเมื่อตรงตามเงื่อนไขและการตรวจสอบเงื่อนไขจะทำด้วยความช่วยเหลือของ if, if-else, if-else-if, show ฯลฯ
v- ถ้า
Example
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
<span style = "font-size:25px;"><b>{{show}}</b></span>
<h1 v-if = "show">This is h1 tag</h1>
<h2>This is h2 tag</h2>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
show: true,
styleobj: {
backgroundColor: '#2196F3!important',
cursor: 'pointer',
padding: '8px 16px',
verticalAlign: 'middle',
}
},
methods : {
showdata : function() {
this.show = !this.show;
}
},
});
</script>
</body>
</html>Output
ในตัวอย่างข้างต้นเราได้สร้างปุ่มและแท็ก h1 สองแท็กพร้อมข้อความ
ตัวแปรที่เรียกว่า show ถูกประกาศและเริ่มต้นเป็นค่าจริง จะแสดงอยู่ใกล้กับปุ่ม เมื่อคลิกปุ่มเรากำลังเรียกใช้วิธีการshowdataซึ่งจะสลับค่าของการแสดงตัวแปร ซึ่งหมายความว่าเมื่อคลิกปุ่มค่าของการแสดงตัวแปรจะเปลี่ยนจากจริงเป็นเท็จและเท็จเป็นจริง
เราได้กำหนด if ให้กับแท็ก h1 ดังที่แสดงในข้อมูลโค้ดต่อไปนี้
<button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
<h1 v-if = "show">This is h1 tag</h1>ตอนนี้สิ่งที่จะทำคือมันจะตรวจสอบค่าของการแสดงตัวแปรและถ้าเป็นจริงแท็ก h1 จะปรากฏขึ้น คลิกปุ่มและดูในเบราว์เซอร์เนื่องจากค่าของตัวแปร show เปลี่ยนเป็น false แท็ก h1 จะไม่แสดงในเบราว์เซอร์ จะแสดงเฉพาะเมื่อตัวแปรแสดงเป็นจริง
ต่อไปนี้คือการแสดงผลในเบราว์เซอร์
หากเราตรวจสอบในเบราว์เซอร์นี่คือสิ่งที่เราได้รับเมื่อการแสดงเป็นเท็จ
แท็ก h1 จะถูกลบออกจาก DOM เมื่อการแสดงตัวแปรถูกตั้งค่าเป็นเท็จ
นี่คือสิ่งที่เราเห็นเมื่อตัวแปรเป็นจริง แท็ก h1 ถูกเพิ่มกลับไปที่ DOM เมื่อการแสดงตัวแปรถูกตั้งค่าเป็นจริง
v- อื่น ๆ
ในตัวอย่างต่อไปนี้เราได้เพิ่ม v-else ในแท็ก h1 ที่สอง
Example
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
<span style = "font-size:25px;"><b>{{show}}</b></span>
<h1 v-if = "show">This is h1 tag</h1>
<h2 v-else>This is h2 tag</h2>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
show: true,
styleobj: {
backgroundColor: '#2196F3!important',
cursor: 'pointer',
padding: '8px 16px',
verticalAlign: 'middle',
}
},
methods : {
showdata : function() {
this.show = !this.show;
}
},
});
</script>
</body>
</html>v-else ถูกเพิ่มโดยใช้ข้อมูลโค้ดต่อไปนี้
<h1 v-if = "show">This is h1 tag</h1>
<h2 v-else>This is h2 tag</h2>ตอนนี้ถ้าแสดงเป็นเรื่องจริง “This is h1 tag” จะปรากฏขึ้นและหากเป็นเท็จ “This is h2 tag”จะปรากฏขึ้น นี่คือสิ่งที่เราจะได้รับในเบราว์เซอร์
การแสดงผลด้านบนคือเมื่อตัวแปรแสดงเป็นจริง เนื่องจากเราได้เพิ่ม v-else จึงไม่มีคำสั่งที่สอง ตอนนี้เมื่อเราคลิกปุ่มตัวแปรแสดงจะกลายเป็นเท็จและคำสั่งที่สองจะแสดงดังที่แสดงในภาพหน้าจอต่อไปนี้
วีโชว์
v-show ทำงานเหมือนกับ v-if นอกจากนี้ยังแสดงและซ่อนองค์ประกอบตามเงื่อนไขที่กำหนดให้ ความแตกต่างระหว่าง v-if และ v-show คือ v-if จะลบองค์ประกอบ HTML ออกจาก DOM หากเงื่อนไขเป็นเท็จและเพิ่มกลับเข้าไปหากเงื่อนไขเป็นจริง ในขณะที่ v-show จะซ่อนองค์ประกอบหากเงื่อนไขเป็นเท็จโดยแสดง: ไม่มี มันแสดงองค์ประกอบกลับถ้าเงื่อนไขเป็นจริง ดังนั้นองค์ประกอบจึงมีอยู่ในโดมเสมอ
Example
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
<span style = "font-size:25px;"><b>{{show}}</b></span>
<h1 v-if = "show">This is h1 tag</h1>
<h2 v-else>This is h2 tag</h2>
<div v-show = "show">
<b>V-Show:</b>
<img src = "images/img.jpg" width = "100" height = "100" />
</div>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
show: true,
styleobj: {
backgroundColor: '#2196F3!important',
cursor: 'pointer',
padding: '8px 16px',
verticalAlign: 'middle',
}
},
methods : {
showdata : function() {
this.show = !this.show;
}
},
});
</script>
</body>
</html>v-show ถูกกำหนดให้กับองค์ประกอบ HTML โดยใช้ข้อมูลโค้ดต่อไปนี้
<div v-show = "show"><b>V-Show:</b><img src = "images/img.jpg" width = "100" height = "100" /></div>เราได้ใช้การแสดงตัวแปรเดียวกันและขึ้นอยู่กับว่าเป็นจริง / เท็จรูปภาพจะปรากฏในเบราว์เซอร์
ตอนนี้เนื่องจากการแสดงตัวแปรเป็นจริงภาพจึงปรากฏในภาพหน้าจอด้านบน ให้เราคลิกปุ่มและดูการแสดงผล
การแสดงตัวแปรเป็นเท็จดังนั้นภาพจึงถูกซ่อน หากเราตรวจสอบและดูองค์ประกอบ div พร้อมกับรูปภาพยังคงเป็นส่วนหนึ่งของ DOM ด้วยการแสดงคุณสมบัติสไตล์: ไม่มีตามที่เห็นในภาพหน้าจอด้านบน
การแสดงรายการ
v- สำหรับ
ตอนนี้ให้เราหารือเกี่ยวกับการแสดงรายการด้วย v-for directive
Example
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<input type = "text" v-on:keyup.enter = "showinputvalue"
v-bind:style = "styleobj" placeholder = "Enter Fruits Names"/>
<h1 v-if = "items.length>0">Display Fruits Name</h1>
<ul>
<li v-for = "a in items">{{a}}</li>
</ul>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
items:[],
styleobj: {
width: "30%",
padding: "12px 20px",
margin: "8px 0",
boxSizing: "border-box"
}
},
methods : {
showinputvalue : function(event) {
this.items.push(event.target.value);
}
},
});
</script>
</body>
</html>ตัวแปรที่เรียกว่ารายการถูกประกาศเป็นอาร์เรย์ ในวิธีการมีวิธีการที่เรียกว่าshowinputvalueซึ่งกำหนดให้กับช่องป้อนข้อมูลที่ใช้ชื่อของผลไม้ ในวิธีการนี้ผลไม้ที่ป้อนภายในกล่องข้อความจะถูกเพิ่มลงในอาร์เรย์โดยใช้รหัสต่อไปนี้
showinputvalue : function(event) {
this.items.push(event.target.value);
}เราได้ใช้ v-for เพื่อแสดงผลไม้ที่ป้อนในโค้ดต่อไปนี้ V-for ช่วยในการวนซ้ำค่าที่มีอยู่ในอาร์เรย์
<ul>
<li v-for = "a in items">{{a}}</li>
</ul>ในการวนซ้ำอาร์เรย์ด้วย for loop เราต้องใช้ v-for =” a in items” โดยที่ a เก็บค่าในอาร์เรย์และจะแสดงจนกว่ารายการทั้งหมดจะเสร็จสิ้น
Output
ต่อไปนี้เป็นผลลัพธ์ในเบราว์เซอร์
ในการตรวจสอบรายการนี่คือสิ่งที่แสดงในเบราว์เซอร์ ใน DOM เราไม่เห็น v-for directive สำหรับองค์ประกอบ li จะแสดง DOM โดยไม่มีคำสั่ง VueJS
หากเราต้องการแสดงดัชนีของอาร์เรย์ก็ทำได้โดยใช้รหัสต่อไปนี้
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<input type = "text" v-on:keyup.enter = "showinputvalue"
v-bind:style = "styleobj" placeholder = "Enter Fruits Names"/>
<h1 v-if = "items.length>0">Display Fruits Name</h1>
<ul>
<li v-for = "(a, index) in items">{{index}}--{{a}}</li>
</ul>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
items:[],
styleobj: {
width: "30%",
padding: "12px 20px",
margin: "8px 0",
boxSizing: "border-box"
}
},
methods : {
showinputvalue : function(event) {
this.items.push(event.target.value);
}
},
});
</script>
</body>
</html>ในการรับดัชนีเราได้เพิ่มตัวแปรอีกหนึ่งตัวแปรในวงเล็บดังที่แสดงในโค้ดต่อไปนี้
<li v-for = "(a, index) in items">{{index}}--{{a}}</li>ใน (a, ดัชนี), a คือค่าและ indexเป็นกุญแจสำคัญ การแสดงเบราว์เซอร์จะเป็นดังที่แสดงในภาพหน้าจอต่อไปนี้ ดังนั้นด้วยความช่วยเหลือของดัชนีค่าเฉพาะใด ๆ ที่สามารถแสดงได้
