The way of learning in Vue Chapter 13: v-for instruction

v-for instruction, you can guess its function from its name. Yes, it is used for iteration and traversal.

1. Traversal of simple array

<body>
    <divi id="app">
        <span v-for="item in list">{{item}}&emsp;</span>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                list:['one','two','three','four','five']
            },
            methods:{}
        })
    </script>
</body>

data defines the list string array, and uses the v-for instruction to traverse the list in the page. item is the element object being traversed currently, in is the fixed syntax, and list is the array being traversed. An interpolation expression is used to show the currently traversed object.

Sometimes in addition to traversing data, we need the sequence number of the current traversal:

 <divi id="app">
    <span v-for="(item,i) in list">The serial number is:{{i}},The elements are:{{item}}<br></span>
 </div>

(Item,i) where i is the sequence number, of course, i and item are temporary variables that can be defined arbitrarily. Operation result:

2. Traversal of object array

<body>
    <divi id="app">
        <span v-for="(item,i) in list">Serial number:{{i}},The subjects are:{{item.course}},The score is:{{item.score}}<br></span>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                list:[
                    {'course':'Chinese', 'score':89},
                    {'course':'Mathematics', 'score':80},
                    {'course':'English?', 'score':90}
                ]
            },
            methods:{}
        })
    </script>
</body>

Get the property value of the object through the method of "item.score". The operation results are as follows:

3. Traversal object

<body>
    <divi id="app">
        <span v-for="(value,key) in mark">Property name:{{key}},Attribute values:{{value}}<br></span>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                mark:{
                    'Chinese':90,
                    'Mathematics':95,
                    'English?':89
                }
            },
            methods:{}
        })
    </script>
</body>

A mark object is defined here. The object has three attributes. When traversing the object, the fixed writing method is: (XX,YY), where YY is the key of the object and XX is the value of the object.

Of course, it can also be written as: (XX,YY,i), where i is the index value.

4. Traversal number

<divi id="app">
      <span v-for="count in 5">The current number is:{{count}}<br></span>
</div>

Here in is followed by specific numbers. Operation result:

 

Summary: v-for can traverse array, object array, object and number.

 

Make a little progress every day!

Tags: Javascript Vue Attribute

Posted on Tue, 03 Dec 2019 11:23:45 -0800 by JUMC_Webmaster