一、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之久'
  				}
  			]
  		}
  	});


结果图

  •  
     
     
  •  
     
     
  •  
     
     









Logo

前往低代码交流专区

更多推荐