初识Vue 3.0 —— v-for: 列表循环数组/对象

<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