vue 简单实验自定义组件综合应用传参数循环

原创于 2023-08-23 11:18:18 发布 · 389 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #组件 #自定义组件 #简单实验

vue 专栏收录该内容

33 篇文章

订阅专栏

本文介绍了如何使用Vue.js创建一个简单的待办事项列表应用，通过v-for指令遍历groceryList数组，展示动态生成的todo-item组件，并展示了数据绑定和全局组件的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.代码

<script src="https://unpkg.com/vue@next" rel="external nofollow" ></script>
<div id="todo-list-app">
  <ol>
     <!--
      现在我们为每个 todo-item 提供 todo 对象
      todo 对象是变量，即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”，稍后再
      作详细解释。
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>
<script>
const TodoList = {
  data() {
    return {
      groceryList: [
        { id: 0, text: 'Vegetables' },
        { id: 1, text: 'Cheese' },
        { id: 2, text: 'Whatever else humans are supposed to eat' }
      ]
    }
  }
}
// 创建一个Vue 应用
const app = Vue.createApp(TodoList)

// 定义一个名为 button-counter 的新全局组件
app.component('todo-item', {
  props: ['todo'],
  template: `<li>{{ todo.text }}</li>`
})

app.mount('#todo-list-app')
</script>

2.运行结果