<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>