<!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.component('item-box', {
props: ['data'],
data() {
return {
list: [
{
msg: 'k1', id: 1},
{
msg: 'k2', id: 2},
{
msg: 'k3', id:3}
]
}
},
methods: {
delClick (index) {
this.list.splice(index, 1)
},
template:'<span>{
{data.msg}}</span>',
}
})
.mount('#app')
</script>
</body>
</html>
又错
<!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({
});
app.component('item-box', {
props: ['data'],
template:'<span>{
{data.msg}}</span>',
data() {
return {
list: [
{
msg: 'k1', id: 1},
{
msg: 'k2', id: 2},
{
msg: 'k3', id:3}
]
}
},
methods: {
delClick (index) {
this.list.splice(index, 1)
},
}
})
app.mount('#app')
</script>
</body>
</html>
终于好啦
<!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>