上篇文章我們分析了一下 vue 中的條件渲染，本篇我們說一下 vue 中的列表渲染和 set 方法。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>vue</title>
6 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
7 </head>
8 <body>
9 <div id="app">
10 <ul>
11 <template v-for="(val, index) of list" :key="index">
12 <li>
13 {{val}}
14 </li>
15 </template>
16 </ul>
17 </div>
18 <script>
19 var app = new Vue({
20 el: '#app',
21 data: {
22 list: ["aaa", "bbb", "ccc"]
23 },
24 })
25 </script>
26 </body>
27 </html>以上代碼我們在 data 裏定義了一個 list 數組數據，並在 HTML 代碼中通過 v-for 指令循環輸出，其中 template 標籤我們可以稱之爲魔法標籤，它可以進行 js 語法的書寫並且在 HTML 頁面裏不額外佔用標籤。並且在循環的時候我們需要向 React 那樣爲每一個循環對象定義一個 key 值。這樣我們就能將數據循環輸出到頁面，結果如下：
那當我們對 data 裏的 list 數據進行修改時會出現怎樣的結果呢？如下圖：
當我們使用數組的 push 方法時可以對 list 數據進行修改，但是我們直接使用 list[i] = XXX；這樣的方法時無法對 list 數據進行修改的，在 vue 中，尤大大爲我們內置了七個數組的操作方法，分別是：push，pop，shift，unshift，splice，sort，reverse。其他的數組操作不起作用。那我們要是想要向上面的 app.list[i] 這樣的操作該怎麼辦呢？官方爲我們提供了 set ，如下：
通過 set 方法我們就可以改變 list 數組中指定的值了。v-for 不僅可以循環輸出數組，還可以循環字符串，對象，當然循環輸出字符串可能沒什麼意思，我們來看一下對象的循環輸出：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>vue</title>
6 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
7 </head>
8 <body>
9 <div id="app">
10 <ul>
11 <li v-for="(val, key, index) of list" :key="index">
12 {{key}} - {{val}} - {{index}}
13 </li>
14 </ul>
15 </div>
16 <script>
17 var app = new Vue({
18 el: '#app',
19 data: {
20 list: {
21 name: "zhangsan",
22 age: 30,
23 sex: "男",
24 }
25 },
26 })
27 </script>
28 </body>
29 </html>運行結果如下：
當我們像上面的 list 數組那樣操作對象時結果是如何呢：
可以看出當我們修改原有的 age 數據時是可以重新渲染 DOM 的，但是當我們在原有的對象上添加新的屬性時無法更新 DOM，那我們就可以利用 set 方法來實現，如下：
我們發現使用 set 方法是完全可以的，需要注意的是對象的 key 和 value 都需要添加引號。
其實在 v-for 中的循環 of 在上面的例子中可以被 in 代替，但我們建議使用 for of，這是由於 for in 會循環 js 原型鏈上的內容，在之前的 ES6 文章中我們說過這個問題，這裏就不再着重說明了。
原文出處：https://www.cnblogs.com/weijiutao/p/10676160.html