vue v-for instructions and key attribute

First, explain

1. iterative array

<ul>

<Li v-for = "(item, i) in list"> Index: {{i}} --- Name: {{item.name}} --- Age: {{item.age}} </ li >

</ul>

2. iteration object attributes

<! - loop through the body of the object Properties ->

3. The number of iterations

4.2.2.0+'s version, when using the v-for in the assembly, key now is a must.

When Vue.js with v-for being updated list elements have been rendered, it defaults to using "in situ multiplex ** **" strategy. If the order of the data item is changed, the Vue ** not move ** DOM element to match the order data items, but simply multiplexed ** ** where each element, and in particular to ensure that it displays the index has been rendered each element.

In order to give a prompt Vue, ** so that it can track the status of each node, thereby reusing existing elements and reorder **, you need to provide a unique key for each property.

Second, examples

1. loop ordinary arrays

< Body > 
  < div ID = "App" > 
    < P V-for = "(Item, I) in List" > index: {{i}} --- each: Item {} {} </ P > 
  </ div > 
  < Script > 
    // Create Vue instance, to give the ViewModel 
    var VM =  new new Vue ({
      on: ' #app ' ,
      data: {
        list: [1, 2, 3, 4, 5, 6]
      },
      methods: {}
    });
  </script>
</body>

2. cycle array of objects

< Body > 
  < div ID = "App" > 
    < P V-for = "(User, I) in List" > Id: {{}} --- the user.id Name: {{user.name}} - - index: {{I}} </ P > 
  </ div > 
  < Script > 
    // Create Vue instance, to give the ViewModel 
    var VM =  new new Vue ({
      on: ' #app ' ,
      data: {
        list: [
          { id: 1, name: 'zs1' },
          { id: 2, name: 'zs2' },
          { id: 3, name: 'zs3' },
          { id: 4, name: 'zs4' }
        ]
      },
      methods: {}
    });
  </script>
</body>

3. Cycle Object

< Body > 
  < div the above mentioned id = "App" > 
    <-! Note: When navigating the object body of key-value pairs, in addition to val key, there is a third position in the Index   -> 
    < the p- v-for = "(Val, key, I) in User" > values are: {{val}} --- bond are: {{key}} - index: {{I}} </ P > 
  </ div > 
  < Script > 
    // Create Vue instance, to give the ViewModel 
    var VM =  new new Vue ({
      on: ' #app ' ,
      data: {
        user: {
          id: 1,
          name: ' Tony feces big stars ' ,
          Gender: ' male '
        }
      },
      methods: {}
    });
  </script>
</body>

4. The number of iterations

< Body > 
  < div the above mentioned id = "App" > 
    <! - in the back we let ordinary array, an array of objects, objects can also put digital -> 
    <! - Note: If you use the v-for iterative digital words, 1 the count value from the preceding start -> 
    < P V-for = "count in 10" > this is the first {{count}} cycles </ P > 
  </ div > 
  < Script > 
    // Create instance Vue give the ViewModel 
    var VM =  new new Vue ({
      on: ' #app ' ,
      data: {},
      methods: {}
    });
  </script>
</body>

The key attribute of the loop using

<body>
  <div id="app">
    <div>
      <label>Id:
        <input type="text" v-model="id">
      </label>

      <label>Name:
        <input type="text" v-model="name">
      </label>

      < The INPUT of the type = "the Button" value = "Add" @click = "the Add" > 
    </ div > 
    <-! Note: v-for cycle time, key attributes can only use the number to obtain String -> 
    ! <- - Note: key when in use, must be used in the form of v-bind binding properties, designated the value of key -> 
    <! - in assembly, when using the v-for loop, or in some special cases, If the v-for a problem, it is necessary to use v-for specified unique string / numeric types: key value -> 
    < P v-for = "Item in List" : key = "item.id" > 
      < INPUT type = "CheckBox" > {{}} --- item.id item.name, for {{}}
     </p>
  </div> 
  < Script > 
    // Create Vue instance, to give the ViewModel 
    var VM =  new new Vue ({
      on: ' #app ' ,
      data: {
        id: '',
        name: '',
        list: [
          ID {: . 1 , name: " Li Si ' },
          ID {: 2 , name: ' YingZheng ' },
          ID {: . 3 , name: ' Zhao Gao ' },
          ID {: . 4 , name: ' Han ' },
          ID {: . 5 , name: ' Zi ' }
        ]
      },
      methods: {
        the Add () { // method of adding 
          the this .list.unshift ({ID: the this .id, name: the this .name})
        }
      }
    });
  </script>
</body>

vue v-for instructions and key attribute

Guess you like