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เป็นกุญแจสำคัญ การแสดงเบราว์เซอร์จะเป็นดังที่แสดงในภาพหน้าจอต่อไปนี้ ดังนั้นด้วยความช่วยเหลือของดัชนีค่าเฉพาะใด ๆ ที่สามารถแสดงได้