<template>
<div >
<todo-list v-bind:todos="todos">
<template v-slot:todo="{ todo }">
<span v-if="todo.isComplete">✓</span>
{{ todo.text }}
</template>
</todo-list>
</div>
</template>
<script>
// eslint-disable-next-line
//import { Lazyload } from 'vant';
//import {Toast} from 'vant';
//import {Notify} from 'vant'
import Vue from 'vue'
Vue.component('todo-list', {
data(){
return {
filteredTodos:[{id:1,text:'first',isComplete:false},{id:2,text:'second',isComplete:true}]
}
},
template: `
<ul>
<li
v-for="todo in filteredTodos"
v-bind:key="todo.id"
>
<slot name="todo" v-bind:todo="todo">
<!-- 后备内容 -->
{{ todo.text }}
</slot>
</li>
</ul>
`
})
export default {
components: {
},
data() {
return {
};
},
mounted() {
},
methods: {
},
};
</script>
<style >
</style>
