"htmlcode">
<body>
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="submit">submit</button>
</div>
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el:"#root",
data:{
inputValue:'',
list:[]
},
methods:{
submit:function(){
this.list.push(this.inputValue);
this.inputValue=''
}
}
})
</script>
</body>
“input”输入框和“inputValue”数据双向绑定
通过click事件，来讲"inputValue"中的内容添加到"list"中
向列表中添加数据用 push( ) this.list.pust(this.inputValue)
每次添加"list"后，把input内容清空
"htmlcode">
<div id="root">
<ul>
<todo-item></todo-item>
</ul>
</div>
<script>
Vue.component('todo-item',{
template:'<li>item<li>'
})
new Vue({
el:"root"
})
</script>
4.局部组件var TodoItem={}这里只写了部分代码
5.
div id="root">
<ul>
<todo-item></todo-item>
</ul>
</div>
<script>
var TodoItem={
template:'<li>item<li>'
}
new Vue({
el:"root",
components:{
'todo-item':TodoItem
}
})
</script>
6.
如果想在其他vue里面使用这个局部组件，需要在vue里对该局部组件进行注册
7.当用组件来实现最上面的那个todolist功能时，需要进行参数的传递和接收，用content和props
8.
<body>
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="submit">submit</button>
</div>
<ul>
<todo-item v-for="(item,index) of list"
:key="index"
:content="item"
>
</todo-item>
</ul>
</div>
<script>
Vue.component('todo-item',{
props:['content'],
template:'<li>{{content}}<li>'
})
new Vue({
el:"#root",
data:{
inputValue:'',
list:[]
},
methods:{
submit:function(){
this.list.push(this.inputValue)
this.inputValue=' '
}
}
})
</script>
</body>
9.
这里面用content来传递item的值，用props来接收content的值。实现数据的传递功能
"htmlcode">
<body>
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="submit">submit</button>
</div>
<ul>
<todo-item v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
>
</todo-item>
</ul>
</div>
<script>
Vue.component('todo-item',{
props:['content','index'],
template:'<li @clicl="handleClick">{{content}}<li>',
methods:{
handleClick:function(){
this.$emit('delete',this.index)
}
}
})
new Vue({
el:"#root",
data:{
inputValue='',
list=[]
},
methods:{
submit:function(){
this.list.push(this.inputValue)
this.inputValue=' '
},
handleDelete:function(index){
this.list.splice(index,1)
}
}
})
</script>
</body>
总结
以上所述是小编给大家介绍的vue实现todolist功能、todolist组件拆分及todolist的删除功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！