<template>
<div>
<div>
<input v-modal="inputValue">
<button @click="handleSubmit">提交</button>
</div>
<ul>
<todo-item v-for="(item, index) of list" :content="item"></todo-item>
</ul>
</div>
</template>
<script>
import TodoItem from './components/TodoItem'
export default {
components:{
'todo-item': TodoItem,
},
data () {
return {
inputValue: '123',
list: []
}
},
methods:{
handleSubmit (){
this.list.push(this.inputValue);
console.log(this.list)
this.inputValue = '';
}
}
}
</script>
下面是todoitem模块的代码
<template>
<li>{{content}}</li>
</template>
<script>
export default {
props: ['content']
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
v-model