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

1.代码

 

<script src="https://unpkg.com/vue@next" rel="external nofollow" ></script>
<div id="todo-list-app"><ol><!--现在我们为每个 todo-item 提供 todo 对象todo 对象是变量，即其内容可以是动态的。我们也需要为每个组件提供一个“key”，稍后再作详细解释。--><todo-itemv-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.运行结果