1. 程式人生 > 其它 >vue3.x 列表渲染

vue3.x 列表渲染

注:例項環境 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>

瀏覽器顯示