<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>

​

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