（17）列表渲染

v-for​

我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名

官网学习渠道https://cn.vuejs.org/guide/essentials/list.html

在 my-component.vue 中使用 v-for 进行列表渲染，你需要先在 data 中定义一个数组，然后在模板中使用 v-for 指令来遍历这个数组并渲染列表项。以下是修改后的代码示例：

<template>
  <h3>prop传递数据</h3>
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  </ul>
</template>

<script>
export default {
  name: 'my-component',
  props: {
    // 接收父组件传递过来的数据
    title: {
      type: String,
      default: '我是默认值'
    }
  },
  data() {
    return {
      // 导出的对象
      name: 'my-component',
      // 定义一个数组用于列表渲染
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4']
    }
  }
}
</script>

<style>
h3 {
  color: red;
}
</style>

 

效果：