Vue basic introduction notes 04: V-for

Time:2021-9-18

Vue basic introduction notes 04

  1. Four cases of V-for
  2. A key is required in a component
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <!--  Array -- >
        < p V-for = "(item, index) in list" > index value {index}} ------- each item {item}}</p>
        <!--  Array object -- >
        < p V-for = "(item, index) in List2" > index value {index}} ------- each item {item. Name}}</p>
        <!--  Object -- >
        < p V-for = "(Val, key, index) in list3" > index value {index}} ------- each item {Val} ----- key {{key}}</p>
        <!--  Number -- >
        <p v-for="count in 10">{{count}}</p>
        <!--  The attribute of key can only be number or string -- >
        <p  v-for="count in 10"  :key="count">{{count}}</p>
    </div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
               list:[
                   'a','b','c'
               ],
               list2:[
                   {'name':'aaaa'},
                   {'name':'bbbb'},
                   {'name':'cccc'},
                   {'name':'dddd'},
               ],
               list3:{
                   name:'zs',
                   sex:'man',
                   age:20
               }
           },
           methods:{}
        });
    </script>
</body>
</html>

This work adoptsCC agreement, reprint must indicate the author and the link to this article

Purple smoke from sunshine censer

Recommended Today

Supervisor

Supervisor [note] Supervisor – H view supervisor command help Supervisorctl – H view supervisorctl command help Supervisorctl help view the action command of supervisorctl Supervisorctl help any action to view the use of this action 1. Introduction Supervisor is a process control system. Generally speaking, it can monitor your process. If the process exits abnormally, […]