v-for的話，相比傳統的jQuery的 $.each或者for循環要簡潔明了的多，
比如在Jquery中我要周遊資料，通常如下幾種方式：
$.each(apps, function(i, app){
rows = rows + '<tr>';
rows = rows + '<td class="info">'+app.roleName+'</td>';
rows = rows + '<td class="info">'+app.roleType+'</td>';
rows = rows + '<td class="info">'+app.createDate+'</td>';
rows = rows + '<td class="info"><input type="button" value="編輯" onclick="editRole('+app.roleCode+')"/> <input type="button" onclick="deleteRoleInfo('+app.roleCode+')" value="删除"/></td>';
rows = rows + '</tr>';
}); for (var i = 0; i < list.length; i++) {
var allowAuth = list[i].allowAuth;
if(allowAuth==1){
allowAuth="可授權使用者,可操作密碼";
}else{
allowAuth="";
}
rows = rows + '<tr>';
rows = rows + ' <td>' + list[i].name + '</td>';
rows = rows + ' <td>' + list[i].mobile + '</td>';
rows = rows + ' <td>' + list[i].mobile + '</td>';
rows = rows + ' <td>' + list[i].authorizer + '</td>';
rows = rows + ' <td>開始時間:' + list[i].authTimeStart + '<br/>結束時間:'+list[i].authTimeEnd+'</td>';
rows = rows + ' <td>' + allowAuth + '</td>';
rows = rows
+ ' <td><a href="#" class="iconfont icon-icon-test12" onclick="editlockManager('+list[i].id+')"></a></td>';
rows = rows + '</tr>';
} 以上說明的這兩種周遊資料的方式，是為jQuery中常用的兩種方式。
而vue.js周遊資料，示例如下:
js代碼:
var apps = data.resourceTypeList;
new Vue({
el:"#test",
data:
{
items:apps
}
});
異步互動，将背景擷取的集合資料指派給apps，其中el的意思可歸于如下:
el
類型： String | HTMLElement | Function
限制： 在元件定義中隻能是函數。
詳細：
為執行個體提供挂載元素。值可以是 CSS 選擇符，或實際 HTML 元素，或傳回 HTML 元素的函數。注意元素隻用作挂載點。如果提供了模闆則元素被替換，除非 replace 為 false。元素可以用 vm.$el 通路。
用在 Vue.extend 中必須是函數值，這樣所有執行個體不會共享元素。
如果在初始化時指定了這個選項，執行個體将立即進入編譯過程。否則，需要調用 vm.$mount()，手動開始編譯。
在這裡我使用的是css選擇符，使用的ID選擇器。
前台html代碼:
當然了，前端要用，就得必須引用vue.min.js這個類庫，否則不能達到應有的效果。
<table align="center" id="test">
<tr>
<td>方案名稱</td>
<td><input type="text" id="plan_name"></td>
</tr>
<tr>
<td>資源類型</td>
<td>
<select id="typeName">
<option v-for="site in items">{{site.typeName}}</option>
</select>
</td>
</tr>
<tr>
<td>标準價</td>
<td>
<input type="text" id="price"
placeholder="請輸入标準價">
</td>
</tr>
<tr>
<td>預設方案</td>
<td>
<input type="radio" name="isDefaultPlan"
value="0" checked>是
<input type="radio"
name="isDefaultPlan" value="1">否
</td>
</tr>
<tr>
<td>狀态</td>
<td><input type="radio" name="status" value="0"
checked>開啟
<input type="radio" name="status"
value="1">關閉
</td>
</tr>
<tr>
</tr>
<tr>
<td>
<input type="button" onclick="addResourcePlan()" value="儲存">
</td>
</tr>
</table> 不過任何架構都有其局限性，比如架構之間的沖突問題，導緻效果出不來也不報錯，還有就是其他一些奇奇怪怪的問題，比如今天我遇到一個很奇怪的問題，我select下拉清單資料周遊，資料正常顯示在前台，而當我需要将其傳入背景時，就出現如圖所示的樣子:
有人說是這個原因:
也有人說是這個原因:
第一個人說是前端沒有統一指定字元集charset=utf-8
的确，如果沒有指定這個，那麼整個頁面有中文的地方都将會亂碼，但是可惜我沒有，因為，我預設建立的界面就已經指定了charset=utf-8,故排除該原因
第二個說的這個原因，我不能确定，故有待驗證
這是我當時通過搜尋引擎找到的比較靠譜的解答，不過後來我反證法，我用jQuery的周遊試一試，如果jQuery的周遊還是一樣的結果，那麼隻能說與第二個人的說法或許有關，又或者是有其他隐性問題。
最後我用jQuery的$.each試了試，發現就沒有出現這個問題了，有人或許會說，也許是緩存吧，如果是緩存的話，我個人修改的js分别用alert測試過，每次修改有的時候我的alert裡面的值已經改了，但是還是之前的，即便我f5了，還是一樣，除非清除浏覽器緩存，重新打開，但是那樣太耗時了，對于開發者而言惜時如金啊！我通過ctrl+f5就行了。
這裡簡單說下f5和ctrl+f5的差別:
按F5有時候一些内容是不會被更新的，而CTRL+F5則所有内容都會被更新.
具體差別是：F5通常隻是重新整理本地緩存；Ctrl+F5可以把INTERNET
臨時檔案夾的
檔案删除再重新從伺服器下載下傳，也就是徹底重新整理頁面。
我想這個回答很容易讓人了解。
最後換成了$.each試了一遍又一遍，真的沒有之前的那個問題了。難道是vue.min.js的緣故嗎？但是如果是vue.min.js，那麼為什麼我之前使用vue的v-for為什麼沒有出現亂碼情況了？比如我的營銷中心業務中資源展示功能，就是用的v-for。難道是因為中文與非中文字元的緣故嗎？我不能妄加猜測，因為程式設計一門實戰且嚴謹的科學，如數學那樣由不得半點含糊，盡管我數學不好，但是數學的一個特性，我還是很喜歡的，那就是"對就是對，錯就是錯，不存在也許或許可能這樣的詞彙"。