Vue 框架-07-循環指令 v-for，和模板的使用
本章主要是寫一些小實例，記錄代碼，想要更詳細的話，請查看
官方文檔：https://cn.vuejs.org/v2/guide/#條件與循環
第一個小實例：
使用 v-for 遍歷 js 文件中定義的數組
源代碼 html 文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>VueLearn-cnblogs/xpwi</title>
<!--引入自定義的樣式-->
<link rel="stylesheet" href="css/style.css" />
<!--引入 vue 核心 js-->
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<!--vue-app 是根容器，定義一個 id，然后在 js 里操作-->
<div id="vue-app">
<h2> v-for </h2>
<!--1.數組下標直接獲取
{{nameList[1]}}-->
<!--2.使用 v-for 遍歷-->
<ul>
<li v-for="i in nameList">{{i}}</li>
</ul>
<!--3.拿 json 數據-->
<ul>
<li v-for="i in users">{{i.name}}-{{i.age}}</li>
</ul>
</div>
<!--引入自己的 js，注意必須寫在 body 標簽里最后，因為必須先加載你的整個 HTML DOM，才回去執行 vue 實例-->
<script type="text/javascript" src="js/vfor.js" ></script>
</body>
</html>
源代碼 js 文件：
//實例化 vue 對象
new Vue({
//注意代碼格式
//el：element 需要獲取的元素，一定是 html 中的根容器元素
el:"#vue-app",
data:{
//下面數組的元素是 json 對象，用於前台 for遍歷
nameList:["Bob","Alice","Eve"],
users:[
{name:"劉備",age:30},
{name:"關羽",age:25},
{name:"張飛",age:28}
]
},
methods:{
}
});
第二個小實例：
加上下標，上面代碼中用 i 表示數組中的元素，也可以第二個參數來表示下標
源代碼 html 文件：
<ul>
<li v-for="(i,n) in users">第{{n}}名：{{i.name}}-{{i.age}}</li>
</ul>
第三個小實例：模板使用
v-for 上面是用在 li 標簽，在 Vue 中使用更多的是在 template 標簽中使用。
v-for 很多時候，比如說，拿到數據倉庫里很多數據。我們遍歷拿到里面的內容，並不是只在一個標簽內應用，這時就要使用到 template 。
template 是 Vue 提供的一個標簽，是一個模板，可以理解成一個 html 的代碼塊。用來存放多個 html 元素。
在頁面 DOM 中 會顯示 template 標簽中的內容，但是 template 標簽本身不會在 HTML DOM 中出現，只是起到一個模板的作用，下面來看實例：
源代碼 html 文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>VueLearn-cnblogs/xpwi</title>
<!--引入自定義的樣式-->
<link rel="stylesheet" href="css/style.css" />
<!--引入 vue 核心 js-->
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<!--vue-app 是根容器，定義一個 id，然后在 js 里操作-->
<div id="vue-app">
<h2> v-for </h2>
<!--1.數組下標直接獲取
{{nameList[1]}}-->
<!--2.使用 v-for 遍歷-->
<!--<ul>
<li v-for="i in nameList">{{i}}</li>
</ul>-->
<!--3.拿 json 數據-->
<!--<ul>
<li v-for="(i,n) in users">第{{n}}名：{{i.name}}-{{i.age}}</li>
</ul>-->
<!--4.template-->
<template v-for="(i,n) in users">
<h3>獲獎者：{{n+1}}</h3>
<p>{{i.name}}</p>
<span>他的年齡是{{i.age}}</span>
</template>
</div>
<!--引入自己的 js，注意必須寫在 body 標簽里最后，因為必須先加載你的整個 HTML DOM，才回去執行 vue 實例-->
<script type="text/javascript" src="js/vfor.js" ></script>
</body>
</html>
源代碼 js 文件：
//實例化 vue 對象
new Vue({
//注意代碼格式
//el：element 需要獲取的元素，一定是 html 中的根容器元素
el:"#vue-app",
data:{
//下面數組的元素是 json 對象，用於前台 for遍歷
nameList:["Bob","Alice","Eve"],
users:[
{name:"劉備",age:30},
{name:"關羽",age:25},
{name:"張飛",age:28}
]
},
methods:{
}
});