vue.js循環for（列表渲染）詳解
一、總結
一句話總結：
v-for
<ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li> </ul>var example1 = new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } })
1、vue.js中的循環結構（列表渲染:for）如何使用？
v-for
用於循環的數組里面的值可以是對象，也可以是普通元素
v-for
可以使用 v-for 指令基於一個數組渲染一個列表。這個指令使用特殊的語法，形式為 item in items，items 是數據數組，item 是當前數組元素的別名：
示例：
<ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li> </ul>var example1 = new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } })結果：
{% raw %}
- {{item.message}}
{% endraw %}
詳細示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>v-for</title> 6 <link rel="stylesheet" type="text/css" href="css/style.css"> 7 <script type="text/javascript" src="js/vue.js"></script> 8 <script type="text/javascript"> 9 window.onload = function() { 10 var dataList = { 11 innerText: [ '大家好', '歡迎來到麥子學院！' ] 12 }; 13 new Vue({ 14 el: 'div', 15 data: dataList 16 }); 17 }; 18 </script> 19 </head> 20 <body> 21 <div class="head face"> 22 <span v-for="text in innerText">{{ text }}</span> 23 </div> 24 </body> 25 </html>
2、vue.js中的循環結構（列表渲染:for）對普通的for循環的增強有哪些？
$index
在 v-for 塊內我們能完全訪問父組件作用域內的屬性，另有一個特殊變量 $index，正如你猜到的，它是當前數組元素的索引：
<ul id="example-2"> <li v-for="item in items"> {{ parentMessage }} - {{ $index }} - {{ item.message }} </li> </ul>var example2 = new Vue({ el: '#example-2', data: { parentMessage: 'Parent', items: [ { message: 'Foo' }, { message: 'Bar' } ] } })結果：
{% raw%}
- {{ parentMessage }} - {{ $index }} - {{ item.message }}
{% endraw %}
另外，你可以為索引指定一個別名（如果 v-for 用於一個對象，則可以為對象的鍵指定一個別名）：
<div v-for="(index, item) in items"> {{ index }} {{ item.message }} </div>
3、vue.js中想用循環結構，但是不想給循環出來的東西添加標簽，如何操作？
template v-for
類似於 template v-if，也可以將 v-for 用在 <template> 標簽上，以渲染一個包含多個元素的塊。例如：
<ul> <template v-for="item in items"> <li>{{ item.msg }}</li> <li class="divider"></li> </template> </ul>
4、vue.js的循環中，如何動態改變數據源數組里面的內容？
數組變動檢測 變異方法
Vue.js 包裝了被觀察數組的變異方法，故它們能觸發視圖更新。被包裝的方法有：
push()pop()shift()unshift()splice()sort()reverse()
你可以打開瀏覽器的控制台，用這些方法修改上例的 items 數組。例如：example1.items.push({ message: 'Baz' })。
5、vue.js的列表渲染中，修改數據源數組的方法和不修改數據源數組的方法分別有哪些？
變異方法 替換數組
變異方法
Vue.js 包裝了被觀察數組的變異方法，故它們能觸發視圖更新。被包裝的方法有：
push()pop()shift()unshift()splice()sort()reverse()
你可以打開瀏覽器的控制台，用這些方法修改上例的 items 數組。例如：example1.items.push({ message: 'Baz' })。
替換數組
變異方法，如名字所示，修改了原始數組。相比之下，也有非變異方法，如 filter(), concat() 和 slice()，不會修改原始數組而是返回一個新數組。在使用非變異方法時，可以直接用新數組替換舊數組：
example1.items = example1.items.filter(function (item) { return item.message.match(/Foo/) })可能你覺得這將導致 Vue.js 棄用已有 DOM 並重新渲染整個列表——幸運的是並非如此。 Vue.js 實現了一些啟發算法，以最大化復用 DOM 元素，因而用另一個數組替換數組是一個非常高效的操作。
6、vue.js的列表渲染中，遍歷對象和遍歷數組有什么區別？
$key
也可以使用 v-for 遍歷對象。除了 $index 之外，作用域內還可以訪問另外一個特殊變量 $key。
<ul id="repeat-object" class="demo"> <li v-for="value in object"> {{ $key }} : {{ value }} </li> </ul>new Vue({ el: '#repeat-object', data: { object: { FirstName: 'John', LastName: 'Doe', Age: 30 } } })結果：
{% raw %}
- {{ $key }} : {{ value }}
{% endraw %}
也可以給對象的鍵提供一個別名：
<div v-for="(key, val) in object"> {{ key }} {{ val }} </div>在遍歷對象時，是按 `Object.keys()` 的結果遍歷，但是不能保證它的結果在不同的 JavaScript 引擎下是一致的。
7、vue.js的列表循環中如何循環打印整數（比如1-100）（比如將某內容重復多少遍）？
值域 v-for
v-for 也可以接收一個整數，此時它將重復模板數次。
<div> <span v-for="n in 10">{{ n }} </span> </div>結果：
{% raw %}
{% endraw %}
二、內容在總結中
參考：vue 列表渲染_w3cschool
https://www.w3cschool.cn/aekdgs/mjag7dn1.html
如需更加詳細，參考vue的手冊即可