1.<template>
<div class="cas">
<ul id="list">
<li v-for="(item,index) in datalist" :key='index'>
<img :src="item.src"/>
</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return {
datalist:[{src:'../../static/image/banner1.png'},
{src:'../../static/image/banner2.png'},
{src:'../../static/image/banner3.png'}
]
}
}
<div class="cas">
<ul id="list">
<li v-for="(item,index) in datalist" :key='index'>
<img :src="item.src"/>
</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return {
datalist:[{src:'../../static/image/banner1.png'},
{src:'../../static/image/banner2.png'},
{src:'../../static/image/banner3.png'}
]
}
}
}
说明:如果不给li标签绑定key值,编译会报错“ <li v-for="item in datalist">: component lists rendered with v-for should have explicit keys.”