vue3.x 列表渲染
阿新 • • 發佈:2021-06-20
注:例項環境 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>
瀏覽器顯示