vue实现todolist功能、todolist组件拆分及todolist的删除功能

时间：2021-05-26

•简单todolist功能的实现

用户点击提交按钮时，将input框的内容显示在下方的list中，同时清空list中内容。

<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内容清空

•todolist组件拆分

1. Vue.component是全局组件，是vue提供的创建组件的方法。里面可以写模板：template

2. 创建组件之后，可以直接使用。比如创建的组件名字是'todo-item'，就可以使用<todo-item></todo-item>

3.

<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的值。实现数据的传递功能

• todolist的删除功能

1.

继续上面的代码，当点击list数据的时候，实现list的删除功能

2.

首先来捋一下逻辑：创建的最外层的大组件/实例中使用了一个小的组件todoitem，我们可以认为最外层的大组件为父组件，里面的小组件为子组件。

3.

我们在父组件中通过属性的形式给子组件传递了具体的内容，然后子组件进行接收父组件传递的内容，然后在子组件的模板中进行显示。

4.

要想实现子组件中数据的删除，需要删除父组件中对应的数据。当点击子组件的数据时，要实现子组件和父组件的通信，来在父组件中进行删除对应数据的操作。

5.

<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的删除功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章