How to use v-for?

the bind-v / v-ON / v-IF / v-for , these instructions should be four vue inside the most commonly used, and the first three of the previously recorded using a simple method, then you remember what v-for the basic usage.

1. v-for requires the use of x in xs such an approach, similar to the F or I in rangeA cycle, XS representatives need to create a data source cycle, all iterations objects, including objects are generally as v-for cyclic data source, while x is the current loop alias data as shown below, we found that v-for the data source may not vApp. $ data attributes, and may be any variable in the global scope.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <title>Vue Test</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="i in names">{I}} { </ Li > 
        </ UL > 
    </ div > 
    < Script > 
        var names = [ " Li Lei " , " Han Meimei " , " Qiang " , " Zhang " , " Jie " ];
         var the vApp =  new new Vue ({ 
            EL: " #app " 
        }) 
    </ Script > 
</body>
</html>

2. can <template> Use the v-for , when rendering <template> will not be rendered. This in peacetime should always be used.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <title>Vue Test</title>
</head>
<body>
    <div id="app">
        <template v-for="i in names">
            <img v-bind:src="i.avatar" alt="">&nbsp;&nbsp;<strong>{{ i.name }}</strong>
            <hr />
        </template>
    </div>
    <script>
        var names = [
            {"name":"李雷","avatar":"https://images.cnblogs.com/cnblogs_com/aisowe/1536642/t_sister.jpg"},
            {"name":"韩梅梅","avatar":"https://images.cnblogs.com/cnblogs_com/aisowe/1536642/t_sister.jpg"},
            {"name":"李强","avatar":"https://images.cnblogs.com/cnblogs_com/aisowe/1536642/t_sister.jpg"}
        ];
        var vApp = new Vue({
            el: "#app"
        })
    </script>
</body>
</html>

3. V-for may be iterative data object, it is noted here default iteration value is converted to a string, such as the following sayHello is a method, but was toString () is a string. Note that (value, key, index) in names of usage. here's index is very important, it said in a loop index or the current number .

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <title>Vue Test</title>
</head>
<body>
    <div id="app">
        <p v-for="(value, key, index) in names">{{ index + 1 }}. {{ key }} : {{ value }}</p>
    </div>
    <script>
        var vApp = new Vue({
            el: "#app",
            data: {
                names: {
                    "name": "韩梅梅",
                    "avatar": "https://images.cnblogs.com/cnblogs_com/aisowe/1536642/t_sister.jpg",
                    "sayHello": function () { alert("hello") }
                    }
            }
        })
    </script>
</body>
</html>

4. In addition, V-for may be iterative integers and strings , this feeling is not much of. ~.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <title>Vue Test</title>
</head>
<body>
    <div id="app">
        <p v-for="i in '李雷'">{{ i }}</p>
        <p v-for="n in 3 ">{{ n }}</p>
    </div>
    <script>
        var vApp = new Vue({
            el: "#app"
        })
    </script>
</body>
</html>

5. To sum up, v-for with js the for in loop in behavior are highly similar, can be compared.

Guess you like