技術標籤：列表vuepythonjavajavascript

<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