<!DOCTYPE html>
<html>
<body>
<div id="app">
<div v-for="(item, index) in list" :key="index"> <item-box :data=item></item-box>
<button @click="delClick(index)">删除</button>
</div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
list: [
{msg: 'k1', id: 1},
{msg: 'k2', id: 2},
{msg: 'k3', id:3}
]
}
},
methods: {
delClick (index) {
this.list.splice(index, 1)
},
}
})
app.component('item-box', {
props: ['data'],
template:'<span>{{data.msg}}</span>'
})
app.mount('#app')
</script>
</body>
</html>
:data=item是什么意思?<item-box :data=item></item-box>呢
最新推荐文章于 2022-04-26 15:42:55 发布