v-for循环数组

官方文档：https://v3.cn.vuejs.org/guide/list.html#%E7%94%A8-v-for-%E6%8A%8A%E4%B8%80%E4%B8%AA%E6%95%B0%E7%BB%84%E5%AF%B9%E5%BA%94%E4%B8%BA%E4%B8%80%E7%BB%84%E5%85%83%E7%B4%A0

使用v-for可以将数据循环呈现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{title}}</h1>
        <h2>{{num}}</h2>
        <h2>{{bool}}</h2>
        <h4>{{arr}}</h4>
        <h4>{{obj.anme}}</h4>
        <hr>
        <ul>
            <li v-for="item in arr">{{item}}</li>
        </ul>
    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            title:"冒险岛",
            num: 456,
            bool:false,
            arr:[1,2,3,4,5,6],
            obj:{name:"王五",age:22,sex:"男"}
        }
    })
</script>

第19行使用v-for="item in arr" 循环arr数组中的每一项，然后赋值给item。

效果图：

如果需要循环出数组的偏移量可以如下操作：

<li v-for="(index,item) in arr">{{index+":"+item}}</li>

v-for循环对象

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{title}}</h1>
        <h2>{{num}}</h2>
        <h2>{{bool}}</h2>
        <h4>{{arr}}</h4>
        <h4>{{obj.anme}}</h4>
        <hr>
        <ul>
            <li v-for="item in arr">{{item}}</li>
        </ul>
        <hr>
        <ul>
            <li v-for="item in obj">
                    {{item}}
            </li>
        </ul>
    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            title:"冒险岛",
            num: 456,
            bool:false,
            arr:[1,2,3,4,5,6],
            obj:{name:"王五",age:22,sex:"男"}
        }
    })
</script>

22-26行循环obj对象

观察结果：

可以看到循环对象时，直接将值循环出来，如果也需要循环对象的属性，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{title}}</h1>
        <h2>{{num}}</h2>
        <h2>{{bool}}</h2>
        <h4>{{arr}}</h4>
        <h4>{{obj.anme}}</h4>
        <hr>
        <ul>
            <li v-for="item in arr">{{item}}</li>
        </ul>
        <hr>
        <ul>
            <li v-for="(item,j) in obj">
                    {{item+":"+j}}
            </li>
        </ul>
    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            title:"冒险岛",
            num: 456,
            bool:false,
            arr:[1,2,3,4,5,6],
            obj:{name:"王五",age:22,sex:"男"}
        }
    })
</script>