10. v-for

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div>
    <ol>
      <!--写法一，有错误提示，表示没有写key-->
      <li v-for="(item,i) in news ">{{item}}</li>
      <!--写法二，-->
      <li v-for="(item,i) in news " :key="i">{{item}}==>{{i}}</li>
    </ol>
    <ol>
      <!--写法三，数据包含对象-->
      <li v-for="(item,i) in news1 " :key="i">{{item.title}}--{{item.tag}}--{{item.num}}</li>
    </ol>
    <ol>
      <!--写法四，对象-->
      <li v-for="(item,i) in laochen " :key="i">{{item}}==>{{i}}</li>
    </ol>
    <ol>
      <!--写法五，效果一模一样-->
      <li v-for="(item,i) of laochen " :key="i">{{item}}==>{{i}}</li>
    </ol>
  </div>
</template>

<script>

export default{
  name:'App',
  data(){
    return{
      news:[
        '菅义伟明年奥运',
        '你好',
        '干你'
      ],
      //放入对象
      news1:[
        {
          title:"菅义伟明年奥运",
          tag:"菲",
          num:"50万"
        },
        {
          title:"北京冬奥会",
          tag:"菲",
          num:"40万"
        } 
      ],
      // 输出对象
      laochen:{
        name:"老城",
        age:30,
        type:"帅"
      }
    }
  },
  methods:{

  }
}
</script>

<style>
/* 表示类名 */
.active{
  background: yellowgreen;
}
</style>