说说Vue.js的v-for-阿里云开发者社区

开发者社区> youcongtech> 正文

说说Vue.js的v-for

简介: v-for的话,相比传统的jQuery的  $.each或者for循环要简洁明了的多, 比如在Jquery中我要遍历数据,通常如下几种方式:   $.each(apps, function(i, app){ rows = rows + ''; rows = rows + ''+app.
+关注继续查看

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+')"/>&nbsp;<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。难道是因为中文与非中文字符的缘故吗?我不能妄加猜测,因为编程一门实战且严谨的科学,如数学那样由不得半点含糊,尽管我数学不好,但是数学的一个特性,我还是很喜欢的,那就是"对就是对,错就是错,不存在也许或许可能这样的词汇"。

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10018 0
使用SSH远程登录阿里云ECS服务器
远程连接服务器以及配置环境
2501 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
9154 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13821 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7344 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
4490 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
22364 0
+关注
youcongtech
热爱生活,热爱编程,乐于分享,善于总结。
276
文章
5
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载