脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue实现todolist

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

 更新时间：2019年04月11日 11:11:43   作者：增伟  
这篇文章主要介绍了vue实现todolist功能、todolist组件拆分及todolist的删除功能,需要的朋友可以参考下

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

您可能感兴趣的文章:

相关文章

  • Vue通过封装全局获取焦点指令

    Vue通过封装全局获取焦点指令

    这篇文章主要为大家详细介绍了Vue通过封装全局获取焦点指令的相关知识,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考下
    2023-12-12
  • 基于Vue的Drawer组件实现

    基于Vue的Drawer组件实现

    本文将从零实现一个Drawer抽屉组件，组件用 vue2 语法写的，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • element-ui中el-input只输入数字(包括整数和小数)

    element-ui中el-input只输入数字(包括整数和小数)

    开发中有时候需要input只能输入数字,下面这篇文章主要给大家介绍了关于element-ui中el-input只输入数字(包括整数和小数)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • Vue.js 和 MVVM 的注意事项

    Vue.js 和 MVVM 的注意事项

    MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，Vue.js 是一个提供 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。这篇文章给大家介绍Vue.js 和 MVVM 的注意事项，感兴趣的朋友一起看看吧
    2016-11-11
  • element中el-form-item属性prop踩坑

    element中el-form-item属性prop踩坑

    最近需要用到vue，在el-form-item属性prop上遇到报错或者没绑定到数据，本文主要介绍了element中el-form-item属性prop踩坑，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue 纯js监听滚动条到底部的实例讲解

    vue 纯js监听滚动条到底部的实例讲解

    今天小编就为大家分享一篇vue 纯js监听滚动条到底部的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue中进行数据筛选与搜索功能实现常用的方法

    Vue中进行数据筛选与搜索功能实现常用的方法

    表格常用功能经常有字段筛选、更多字段筛选弹框来过滤出我们所需要的数据,下面这篇文章主要给大家介绍了关于Vue中进行数据筛选与搜索功能实现常用的方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • Vue如何提升首屏加载速度实例解析

    Vue如何提升首屏加载速度实例解析

    这篇文章主要介绍了Vue如何提升首屏加载速度实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06
  • vue3.0 vue.config.js 配置基础的路径问题

    vue3.0 vue.config.js 配置基础的路径问题

    这篇文章主要介绍了vue3.0 vue.config.js 配置基础的路径问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-10-10
  • 基于Vue2.X的路由和钩子函数详解

    基于Vue2.X的路由和钩子函数详解

    下面小编就为大家分享一篇基于Vue2.X的路由和钩子函数详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02

最新评论