vue-cli中v-for的用法

最新推荐文章于 2023-03-28 20:30:00 发布

loveAsuka_

最新推荐文章于 2023-03-28 20:30:00 发布

阅读量100

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_52182385/article/details/128556802

版权

该文章展示了如何在VueCLI项目中使用`v-for`指令来遍历数据数组，每个数组项包含`imgUrl`和`courseName`等属性。`v-for`循环结合`:key`属性用于列表渲染，例子中显示了两个课程的图片和名称。

摘要由CSDN通过智能技术生成

vue-cli: v-for的用法

格式：v-for=“xx in data” :key=“index”
数据使用data方法直接在export default {}中写，可以用return返回一个对象

代码

<template>
  <div>
    <div class="top">
      <h2>遍历数组对象</h2>
    </div>
<div>
  <div class="down">
    <ul>
      <li v-for="(item,index) in list" :key="index">
        <img :src='item.imgUrl' alt="">
        {{item.courseName}}
      </li>
    </ul>
  </div>
</div>
  </div>
</template>

<script>
export default {
name: "free-course",
data(){
  return {
    list:[
      {
        imgUrl: 'https'
        courseName: '1111111',
        courseId: 12
      },
      {
        imgUrl:'https'
        courseName: '2222222',
        courseId: 13
      }
    ]
  }

},
}
</script>