1. 遍歷數(shù)組
1.1 < li > 標(biāo)簽中使用
語(yǔ)法示例
<li v-for="site in sites">{{ site.name }} : {{site.attack}}</li>
完整示例
- 代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CROW SONG</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<ol>
<li v-for="site in sites">{{ site.name }} : {{site.attack}}</li>
</ol>
</div>
<script>
new Vue({
el: "#app",
data: {
sites: [
{ name: "關(guān)羽", attack: 95 },
{ name: "張飛", attack: 90 },
{ name: "趙云", attack: 97 },
{ name: "馬超", attack: 92 },
{ name: "黃忠", attack: 88 },
],
},
});
</script>
</body>
</html>
-
打印結(jié)果
image.png
1.2 模板中使用
語(yǔ)法示例
<ul>
<template v-for="site in sites">
<li > xxxxxxx </li>
</template>
</ul>
完整示例
- 代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CROW SONG</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<template v-for="site in sites">
<li >{{ site.name }} : {{site.attack}}</li>
<li>====================</li>
</template>
</ul>
</div>
<script>
new Vue({
el: "#app",
data: {
sites: [
{ name: "關(guān)羽", attack: 95 },
{ name: "張飛", attack: 90 },
{ name: "趙云", attack: 97 },
{ name: "馬超", attack: 92 },
{ name: "黃忠", attack: 88 },
],
},
});
</script>
</body>
</html>
-
輸出
image.png
2. 迭代對(duì)象屬性
對(duì)象有三個(gè)值，按順序一次是：value，key，index。
我們用以下示例測(cè)試：
2.1 迭代第一個(gè)參數(shù)（值）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CROW SONG</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="info in object">
{{ info }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
object: {
name: '關(guān)羽',
belong: '蜀',
attack: 98
}
}
})
</script>
</body>
</html>
-
輸出
image.png
2.2 迭代第二個(gè)參數(shù)（鍵名）
<div id="app">
<ul>
<li v-for="(value,key) in object">
{{ key }} : {{value}}
</li>
</ul>
</div>
-
顯示結(jié)果
image.png
2.3 第三個(gè)參數(shù)（索引值）
<div id="app">
<ul>
<li v-for="(value,key,index) in object">
{{index}} : {{ key }} : {{value}}
</li>
</ul>
</div>
-
顯示結(jié)果
image.png
3. 遍歷整數(shù)范圍
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CROW-宋</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="n in 8">
{{ n }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app'
})
</script>
</body>
</html>
-
結(jié)果輸出
image.png
image.png
