(三)Vue.js v-for循环遍历 20170818

最新推荐文章于 2024-07-27 19:03:29 发布

u013457570

最新推荐文章于 2024-07-27 19:03:29 发布

阅读量2.9w

点赞数 2

分类专栏：前端--vue.js

本文链接：https://blog.csdn.net/u013457570/article/details/77371983

版权

前端--vue.js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、v-for 遍历数组

jsp 代码

  <body>
    <h2>v-for 循环语句</h2>
    <ul id="vfor">
    	<template v-for="name in names">
    		<li>{{name.name}}</li>
    		<li>-------</li>
    	</template>
    </ul>
    
  </body>
  <script type="text/javascript">
  /*定义的数据 使用for循环去获取*/
  	new Vue({
  		el:"#vfor",
  		data:{
  		  names:[
  			{name:'estar'},
  			{name:'TingPing'},
  			{name:'LiangXing'},
  			]
  		}
  	});
  </script>

结果图：

（二）v-for 遍历对象

1、遍历对象第一种写法

<div id="vforObject">
    	<ul>
    		<li v-for="object in objects">
    			{{object}}
    		</li>
   	 </ul>
    </div>

 /*定义的对象 使用for循环去获取*/
  	new Vue({
  		el:"#vforObject",
  		data:{
  		   objects:{
  			name:'estar',
  			address:'TingPing',
  			desc:'深造于保险行业已经10之久'
  		  }
  		}
  	});

结果图：

2、遍历对象第一种写法

<div id="vforObject">
    	<ul>
    		<li v-for="(value,key) in objects">
    			{{key}} : {{value}}
    		</li>
   	 </ul>
    </div>

 /*定义的对象 使用for循环去获取*/
  	new Vue({
  		el:"#vforObject",
  		data:{
  			objects:{
  				name:'estar',
  				address:'TingPing',
  				desc:'深造于保险行业已经10之久'
  			}
  		}
  	});

结果图

name : estar
address : TingPing
desc : 深造于保险行业已经10之久

3、遍历集合中的对象

 <!-- v-for遍历集合 -->
    <div id="vforList">
    	<template v-for="obj in objects">
    	<ul>
    		<li >
    			<label>姓名：{{obj.name}}</label>		<br/>
    			<label>地址：{{obj.address}}</label>	<br/>
    			<label>主要业务：{{obj.desc}}</label>	<br/>
    		</li>
   	 	</ul>
    	</template>
    </div>

	/*编译数组中的集合*/
  	var v = new Vue({
  		el:"#vforList",
  		data:{
  			objects:[
  				{
	  				name:'estar1-flx',
	  				address:'广州市天河区中山大道89号华景软件园A栋10楼F区',
	  				desc:'深造于保险行业已经10之久'
  				},
  				{
	  				name:'estar2-flx',
	  				address:'广州市天河区中山大道89号华景软件园A栋10楼F区',
	  				desc:'深造于保险行业已经10之久'
  				},
  				{
	  				name:'estar3-flx',
	  				address:'广州市天河区中山大道89号华景软件园A栋10楼F区',
	  				desc:'深造于保险行业已经10之久'
  				}
  			]
  		}
  	});