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


Posted in Javascript onApril 11, 2019

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

Javascript 相关文章推荐
ajax无刷新动态调用股票信息(改良版)
Nov 01 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
Sep 15 Javascript
用客户端js实现带省略号的分页
Apr 27 Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 Javascript
js操作模态窗口及父子窗口间相互传值示例
Jun 09 Javascript
javascript进行四舍五入方法汇总
Dec 16 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
Aug 05 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
Jan 27 Javascript
Es6 写的文件import 起来解决方案详解
Dec 13 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
JavaScript复制内容到剪贴板的两种常用方法
Feb 27 Javascript
基于Proxy的小程序状态管理实现
Jun 14 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
Apr 11 #Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
Apr 11 #Javascript
使用Vue父子组件通信实现todolist的功能示例代码
Apr 11 #Javascript
详解jQuery设置内容和属性
Apr 11 #jQuery
js作用域和作用域链及预解析
Apr 11 #Javascript
关于js陀螺仪的理解分析
Apr 11 #Javascript
angular 表单验证器验证的同时限制输入的实现
Apr 11 #Javascript
You might like
PHP面向对象教程之自定义类
2014/06/10 PHP
php计算整个mysql数据库大小的方法
2015/06/19 PHP
Laravel中log无法写入问题的解决
2017/06/17 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
学习JavaScript的最佳方法分享
2011/10/21 Javascript
jQuery.event兼容各浏览器的event详细解析
2013/12/18 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
2016/05/24 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
2017/01/19 Javascript
JavaScript表单验证完美代码
2017/03/02 Javascript
jQuery使用ajax_动力节点Java学院整理
2017/07/05 jQuery
[40:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs TNC
2018/04/01 DOTA
推荐11个实用Python库
2015/01/23 Python
Python环境搭建之OpenCV的步骤方法
2017/10/20 Python
Python实现返回数组中第i小元素的方法示例
2017/12/04 Python
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
pandas 数据实现行间计算的方法
2018/06/08 Python
python正向最大匹配分词和逆向最大匹配分词的实例
2018/11/14 Python
pycharm+PyQt5+python最新开发环境配置(踩坑)
2019/02/11 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
Python使用Pandas对csv文件进行数据处理的方法
2019/08/01 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
django框架两个使用模板实例
2019/12/11 Python
美国宠物商店:Wag.com
2016/10/25 全球购物
英国设计的甲板鞋和船鞋:Chatham
2018/12/06 全球购物
新加坡第一大健康与美容零售商:屈臣氏新加坡(Watsons Singapore)
2020/12/11 全球购物
商务会议邀请函
2014/01/09 职场文书
行政人事专员岗位职责
2014/03/05 职场文书
大学三年计划书范文
2014/04/30 职场文书
生产车间标语
2014/06/11 职场文书
2014国庆节演讲稿:祖国在我心中(400字)
2014/09/25 职场文书
学校师德师风自我剖析材料
2014/09/29 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
关于运动会的广播稿50字
2014/10/17 职场文书
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS
企业版Windows 11有哪些新功能? Win11适用于企业的功能介绍
2021/11/21 数码科技