1.代碼
?
<script src="https://unpkg.com/vue@next" rel="external nofollow" ></script>
<div id="todo-list-app">
<ol>
<!--
現(xiàn)在我們?yōu)槊總€ todo-item 提供 todo 對象
todo 對象是變量，即其內(nèi)容可以是動態(tài)的。
我們也需要為每個組件提供一個“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' }
]
}
}
}
// 創(chuàng)建一個Vue 應(yīng)用
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.運行結(jié)果文章來源：http://www.zghlxwxcb.cn/news/detail-666134.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-666134.html
到了這里，關(guān)于vue 簡單實驗 自定義組件 綜合應(yīng)用 傳參數(shù) 循環(huán)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
