<h5>5.列表循环</h5>
<p>a.遍历数组: v-for="item in lists" ,数组格式 items: [{ tag: '花菜' }, { tag: '菠菜' },{ tag: '大白菜' }]</p>
<div class="list">
	<ul>
		<li v-for="item in lists">{{item.tag}}</li>
	</ul>
</div>
<pre>注意:v-for="item in lists" 直接绑定到循环元素上,小程序绑定数据是在父元素上,注意区分!</pre>
<pre>v-for 还支持一个可选的第二个参数,即当前项的索引。 v-for="(item, index) in items" </pre>
<pre>v-for 也可以用 of 替代 in 作为分隔符。  v-for="item of items"</pre>
<script type="text/javascript">
	//列表循环
	const listBox = {
		data(){
return{
	lists:[
		{id:0,tag:"花菜"},{id:2,tag:"菠菜"},{id:3,tag:"大白菜"}
	]
}
		}
	}
	Vue.createApp(listBox ).mount('#app .list');
</script>
<p>b.遍历对象:v-for="item in myo" ,对象格式: myo: {title: 'How to do lists in Vue',author: 'Jane Doe',publishedAt: '2020-03-22'}</p>
<div id="list">
	<ul>
		<li v-for="(value, name) in myo">
		  {{ name }}: {{ value }}
		</li>
	</ul>
</div> 
<pre>注意:遍历对象是,v-for的参数可以有三个,依次为:值,键值,索引</pre>
<script type="text/javascript">
	Vue.createApp({
	  data() {
	    return {
	      myo: {
	        title: 'How to do lists in Vue',
	        author: 'Jane Doe',
	        publishedAt: '2020-03-22'
	      }
	    }
	  }
	}).mount('#list')
</script>

交互效果见:https://course.51qux.com/vue3-0-1

版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。