博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
说说Vue.js的v-for
阅读量:4881 次
发布时间:2019-06-11

本文共 3656 字,大约阅读时间需要 12 分钟。

v-for的话,相比传统的jQuery的  $.each或者for循环要简洁明了的多,

比如在Jquery中我要遍历数据,通常如下几种方式:

 

$.each(apps, function(i, app){                                rows = rows +  '';                rows = rows + ''+app.roleName+'';                rows = rows + ''+app.roleType+'';                rows = rows + ''+app.createDate+'';                rows = rows + ' ';                rows = rows +  '';            });

 

for (var i = 0; i < list.length; i++) {                  var allowAuth = list[i].allowAuth;                  if(allowAuth==1){                      allowAuth="可授权用户,可操作密码";                  }else{                      allowAuth="";                  }                  rows = rows + '';                  rows = rows + '  ' + list[i].name + '';                  rows = rows + '  ' + list[i].mobile + '';                  rows = rows + '  ' + list[i].mobile + '';                  rows = rows + '  ' + list[i].authorizer + '';                  rows = rows + '  开始时间:' + list[i].authTimeStart + '
结束时间:'+list[i].authTimeEnd+''; rows = rows + ' ' + allowAuth + ''; rows = rows + ' '; rows = rows + ''; }

 

以上说明的这两种遍历数据的方式,是为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这个类库,否则不能达到应有的效果。

方案名称
资源类型
标准价
默认方案
状态 开启 关闭

 

不过任何框架都有其局限性,比如框架之间的冲突问题,导致效果出不来也不报错,还有就是其他一些奇奇怪怪的问题,比如今天我遇到一个很奇怪的问题,我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。难道是因为中文与非中文字符的缘故吗?我不能妄加猜测,因为编程一门实战且严谨的科学,如数学那样由不得半点含糊,尽管我数学不好,但是数学的一个特性,我还是很喜欢的,那就是"对就是对,错就是错,不存在也许或许可能这样的词汇"。

 

转载于:https://www.cnblogs.com/youcong/p/9457021.html

你可能感兴趣的文章
微信小程序从零开始开发步骤(二)
查看>>
Ruby学习札记(四) 类 函数 代码块
查看>>
7. ZooKeeper的stat结构
查看>>
转:用GMapImageCutter1.4做地图(附下载)
查看>>
nginx + php-fpm 高并发配置 (也包括一部分apache/httpd)
查看>>
$.get/$.post/$.ajax/$.getJSON
查看>>
Java第三次作业
查看>>
6486: An Ordinary Game(规律)
查看>>
EntityFramework 启用迁移 Enable-Migrations 报异常 "No context type was found in the assembly"
查看>>
ssl2648-线段树练习5【线段树】
查看>>
[Tools] Create a Simple CLI Tool in Node.js with CAC
查看>>
HDU 4965 Fast Matrix Calculation 矩阵快速幂
查看>>
ThoughtWorks中国区CTO徐昊访谈摘录
查看>>
软工第二次作业
查看>>
基于Activiti5.15.1 自定义用户、组(User,Group)实现
查看>>
第1章 游戏之乐——中国象棋将帅问题
查看>>
spark读取 kafka nginx网站日志消息 并写入HDFS中(转)
查看>>
【BZOJ4590】[Shoi2015]自动刷题机 二分
查看>>
微信网页授权流程(前端篇)
查看>>
自己构建的Lumbda表达式
查看>>