VueJS - Kết xuất

Trong chương này, chúng ta sẽ tìm hiểu về kết xuất có điều kiện và kết xuất danh sách. Trong kết xuất có điều kiện, chúng ta sẽ thảo luận về việc sử dụng if, if-else, if-else-if, show, v.v. Trong kết xuất danh sách, chúng ta sẽ thảo luận về cách sử dụng vòng lặp for.

Kết xuất có điều kiện

Hãy bắt đầu và làm việc trên một ví dụ trước để giải thích các chi tiết cho kết xuất có điều kiện. Với kết xuất có điều kiện, chúng ta chỉ muốn xuất khi điều kiện được đáp ứng và việc kiểm tra điều kiện được thực hiện với sự trợ giúp của if, if-else, if-else-if, show, v.v.

v-nếu

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

Trong ví dụ trên, chúng tôi đã tạo một nút và hai thẻ h1 với thông báo.

Một biến được gọi là show được khai báo và khởi tạo thành một giá trị true. Nó được hiển thị gần với nút. Khi nhấp vào nút, chúng tôi đang gọi một phương thứcshowdata, chuyển đổi giá trị của biến hiển thị. Điều này có nghĩa là khi nhấp vào nút, giá trị của biến hiển thị sẽ thay đổi từ true thành false và false thành true.

Chúng tôi đã gán if cho thẻ h1 như được hiển thị trong đoạn mã sau.

<button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
<h1 v-if = "show">This is h1 tag</h1>

Bây giờ những gì nó sẽ làm là, nó sẽ kiểm tra giá trị của biến hiển thị và nếu đúng thì thẻ h1 sẽ được hiển thị. Nhấp vào nút và xem trong trình duyệt, vì giá trị của biến hiển thị thay đổi thành false, thẻ h1 không được hiển thị trong trình duyệt. Nó chỉ được hiển thị khi biến hiển thị là true.

Sau đây là hiển thị trong trình duyệt.

Nếu chúng tôi kiểm tra trong trình duyệt, đây là những gì chúng tôi nhận được khi hiển thị là sai.

Thẻ h1 bị xóa khỏi DOM khi hiển thị biến được đặt thành false.

Đây là những gì chúng ta thấy khi biến là true. Thẻ h1 được thêm trở lại DOM khi chương trình biến được đặt thành true.

v-else

Trong ví dụ sau, chúng tôi đã thêm v-else vào thẻ h1 thứ hai.

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 được thêm vào bằng đoạn mã sau.

<h1 v-if = "show">This is h1 tag</h1>
<h2 v-else>This is h2 tag</h2>

Bây giờ, nếu chương trình là sự thật “This is h1 tag” sẽ được hiển thị, và nếu sai “This is h2 tag”sẽ được hiển thị. Đây là những gì chúng ta sẽ nhận được trong trình duyệt.

Hiển thị trên là khi biến hiển thị là true. Kể từ khi, chúng tôi đã thêm v-else, câu lệnh thứ hai không có mặt. Bây giờ, khi chúng ta nhấp vào nút, biến hiển thị sẽ trở thành sai và câu lệnh thứ hai sẽ được hiển thị như trong ảnh chụp màn hình sau.

v-show

v-show hoạt động giống như v-if. Nó cũng hiển thị và ẩn các phần tử dựa trên điều kiện được gán cho nó. Sự khác biệt giữa v-if và v-show là v-if loại bỏ phần tử HTML khỏi DOM nếu điều kiện sai và thêm lại phần tử đó nếu điều kiện đúng. Trong khi v-show ẩn phần tử, nếu điều kiện sai với display: none. Nó hiển thị phần tử trở lại, nếu điều kiện là đúng. Do đó, phần tử luôn hiện diện trong dom.

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 được gán cho phần tử HTML bằng đoạn mã sau.

<div v-show = "show"><b>V-Show:</b><img src = "images/img.jpg" width = "100" height = "100" /></div>

Chúng tôi đã sử dụng cùng một biến hiển thị và dựa trên nó là true / false, hình ảnh được hiển thị trong trình duyệt.

Bây giờ, vì biến hiển thị là true, hình ảnh được hiển thị trong ảnh chụp màn hình ở trên. Hãy để chúng tôi nhấp vào nút và xem màn hình.

Biến hiển thị là sai, do đó hình ảnh bị ẩn. Nếu chúng tôi kiểm tra và thấy phần tử, div cùng với hình ảnh vẫn là một phần của DOM với hiển thị thuộc tính style: none như được thấy trong ảnh chụp màn hình ở trên.

Kết xuất danh sách

v-cho

Bây giờ chúng ta hãy thảo luận về kết xuất danh sách với chỉ thị v-for.

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>

Một biến được gọi là các mục được khai báo dưới dạng một mảng. Trong các phương thức, có một phương thức được gọi làshowinputvalue, được gán cho hộp nhập có tên của các loại trái cây. Trong phương thức, các kết quả được nhập bên trong hộp văn bản được thêm vào mảng bằng cách sử dụng đoạn mã sau.

showinputvalue : function(event) {
   this.items.push(event.target.value);
}

Chúng tôi đã sử dụng v-for để hiển thị các loại trái cây đã nhập như trong đoạn mã sau. V-for giúp lặp lại các giá trị có trong mảng.

<ul>
   <li v-for = "a in items">{{a}}</li>
</ul>

Để lặp lại mảng với vòng lặp for, chúng ta phải sử dụng v-for = ”a in items” trong đó a giữ các giá trị trong mảng và sẽ hiển thị cho đến khi hoàn thành tất cả các mục.

Output

Sau đây là kết quả trong trình duyệt.

Khi kiểm tra các mục, đây là những gì nó hiển thị trong trình duyệt. Trong DOM, chúng tôi không thấy bất kỳ lệnh v-for nào đối với phần tử li. Nó hiển thị DOM mà không có bất kỳ chỉ thị VueJS nào.

Nếu chúng ta muốn hiển thị chỉ mục của mảng, nó được thực hiện bằng cách sử dụng đoạn mã sau.

<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>

Để có được chỉ mục, chúng tôi đã thêm một biến nữa trong ngoặc như thể hiện trong đoạn mã sau.

<li v-for = "(a, index) in items">{{index}}--{{a}}</li>

Trong (a, chỉ mục), a là giá trị và indexlà chìa khóa. Màn hình trình duyệt bây giờ sẽ như được hiển thị trong ảnh chụp màn hình sau. Do đó, với sự trợ giúp của chỉ mục, bất kỳ giá trị cụ thể nào cũng có thể được hiển thị.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved