todolist功能开发
todolist，简单的说是由一个框，按键组成。在框内输入内容，点击按键，输入的内容会以一个形式表现出来。
举个例子：
<body>
<div id="root">
<div>
<input v-model="inputValue" />
<button @click="handleSubmit">提交</button>
</div>
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el:"#root",
data:{
inputValue:'hello',
list:[]
},
methods:{
handleSubmit:function(){
this.list.push(this.inputValue)
}
}
})
</script>
</body>
简单的布局就是input标签是一个输入框，旁边有一个button标签按钮，下面是显示li标签的内容，这是大体的布局。
细化是，input框设置成双向绑定（即数据可以决定显示，显示也可以决定数据），button按钮设置成点击事件，点击之后，输入框里的内容将推进list数据里面，因为li标签聚集了list的数据，故也即会显示在li列表中。写一个lihaoran,效果如下:
image.png
hello是开始就在数据项的inputValue中设置的，去掉重新输入lihaoran并点击提交，将会在下面的li标签中显示出来。
但是这样有一个麻烦，就是输入东西后点击提交，内容会在li标签中显示，但是输入框中的内容没有消失，这样会影响下一次的输入效率。思路是可以在将输入框中的内容推入list后，将输入框中的内容设置为空：
methods:{
handleSubmit:function(){
this.list.push(this.inputValue)
this.inputValue =''
}
网友评论