注:实例环境 vue cli构建的项目

app.vue

<template>
  <Example></Example>
</template>

<script>
import Example from './components/Example'

export default {
  name: 'App',
  components: {
    Example
  }
}
</script>

<style>

</style>

Example.vue

<template>
    <div>
        <label>list1</label>
        <ul>
            <li v-for="item in list1" :key="item">{{item}}</li>
        </ul>
        <label>list2</label>
        <ul>
            <li v-for="item in list2" :key="item.id">{{item.title}}</li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "Example",
        data:function () {
            return {
                list1:['title1','title2','title3'],
                list2:[
                    {id:1,title:'title1'},
                    {id:2,title:'title2'},
                    {id:3,title:'title3'}
                ]
            }
        }
    }
</script>

<style scoped>
</style>

浏览器显示

vue3.x 列表渲染

相关文章:

  • 2022-01-26
  • 2021-12-12
  • 2021-09-26
  • 2021-06-30
  • 2021-11-22
  • 2021-09-17
  • 2021-09-18
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2021-08-23
  • 2021-11-19
相关资源
相似解决方案