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。难道是因为中文与非中文字符的缘故吗？我不能妄加猜测，因为编程一门实战且严谨的科学，如数学那样由不得半点含糊，尽管我数学不好，但是数学的一个特性，我还是很喜欢的，那就是"对就是对，错就是错，不存在也许或许可能这样的词汇"。
说说Vue.js的v-for
原文地址：https://www.cnblogs.com/youcong/p/9457021.html