vue之循环语句

1.vue中的循环语句

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

2.迭代对象

<div id="loop-object">
	<p>v-for 迭代对象p>
	<span v-for="obj in object">
		{{obj}}
	span>
div>

var loopObject=new Vue({
	el:"#loop-object",
	data:{
		object:{
			name:"admin",
			age:18,
			id:5
		}
			
	}
});

3.迭代对象数组

<div id="loop-use">
	<table border="1" cellspacing="0" cellpadding="0">
		<tr>
			<th>编号th>
			<th>姓名th>
			<th>年龄th>
		tr>
		<tr v-for="user in users">
			<td>{{user.id}}td>
			<td>{{user.name}}td>
			<td>{{user.age}}td>
		tr>
	table>
div>

var loopUse=new Vue({
	el:"#loop-use",
	data:{
		users:[
			{id:1,name:"admin",age:18},
			{id:2,name:"root",age:20},
			{id:3,name:"guest",age:25},
		]
	}
});

4.使用key、value方式迭代

<div id="iterator-obj-use-keymap">
	<p>迭代对象使用key，value方式实现p>
	<p v-for="(value,key) in map">key:{{key}}和value:{{value}}p>
div>

var keymap=new Vue({
	el:"#iterator-obj-use-keymap",
	data:{
		map:{
			name:"admin",
			age:18,
			id:5
		}
			
	}
});

5.迭代方式使用index下标

<div id="iterator-obj-use-index">
	<p>迭代方式使用index下标p>
	<p v-for="(value,key,index) in mapindex">
		key:{{key}}和value:{{value}}和index:{{index}}
	p>
div>

var keymapindex=new Vue({
	el:"#iterator-obj-use-index",
	data:{
		mapindex:{
			name:"admin",
			age:18,
			id:5
		}
			
	}
});

6.迭代整数

<div id="iterator-int">
	<p>迭代整数p>
	<p v-for="i in int">
		{{i}}
	p>
div>

var ints=new Vue({
	el:"#iterator-int",
	data:{
		int:5
	}
});

7.总结

1.vue中的迭代主要使用v-for=“(value,key,index) in 集合或数组或数字”

2.其中value表示当前的之，key表示当前的键，index表示当前的下标

以上纯属个人见解，如有问题请联系本人！