VueJS – Render theo list

v-for

Ví dụ

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/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>

Trong code trên, items trong data là 1 mảng. Trong methods có phương thức showinputvalue, phương thức này được gọi khi nhấn phím enter trong input và sẽ thêm giá trị từ input này vào mảng items trong data.

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

v-for sẽ lặp qua các phần tử của mảng items và hiển thị chúng ra.

Cách dùng:

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

Kết quả.

Trong ví dụ trên, a là giá trị của các phần tử trong mảng. Để lặp qua key chúng ta dùng như bên dưới.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/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>

Chúng ta đã lấy cả key và value trong mảng bằng code sau

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

Trong đó a là value còn indexkey. Kết quả hiển thị trên trình duyệt.