在Vue.js中,List是一個非常重要的概念。List即指將數(shù)據(jù)按照一定的方式展示在頁面上。Vue中通過v-for指令來實現(xiàn)List。
<template> <ul> <li v-for="(item, index) in itemList" :key="item.id"> {{ item.name }} </li> </ul> </template>
在上述代碼中,v-for指令將itemList數(shù)組中的每個元素都渲染成一個li標(biāo)簽。其中,(item, index)表示遍歷itemList數(shù)組時,每個元素都會被分別賦值給item和index兩個變量。:key="item.id"用于維護每個列表項的唯一性,提高性能。
除此之外,v-for指令也可以遍歷對象中的屬性,如下:
<template> <ul> <li v-for="(value, key) in obj" :key="key"> {{ key }}: {{ value }} </li> </ul> </template> <script> export default { data() { return { obj: { name: '張三', age: 18, gender: '男' } } } } </script>
在以上代碼中,obj是一個對象,在v-for指令中,通過(value, key)可以分別遍歷obj對象中的屬性值和屬性名,并將它們渲染到li標(biāo)簽中。
總的來說,v-for指令是Vue中一個非常有用的指令,在開發(fā)中會經(jīng)常用到。
上一篇html h5 太極代碼
下一篇Linux寫vue