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 相关文章推荐
JavaScript字符串String和Array操作的有趣方法
Dec 18 Javascript
在ASP.NET中使用JavaScript脚本的方法
Nov 12 Javascript
javascript实现根据身份证号读取相关信息
Dec 17 Javascript
JavaScript数组各种常见用法实例分析
Aug 04 Javascript
JavaScript代码里的判断小结
Aug 22 Javascript
vue.js指令v-for使用及索引获取
Nov 03 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
Dec 01 Javascript
浅析bootstrap原理及优缺点
Mar 19 Javascript
vue组件发布到npm简单步骤
Nov 30 Javascript
vue用BMap百度地图实现即时搜索功能
Sep 26 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
Apr 08 Javascript
vue 实现上传组件
May 31 Vue.js
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 巧用数组降低程序的时间复杂度
2010/01/01 PHP
php用正则表达式匹配URL的简单方法
2013/11/12 PHP
解决ThinkPHP关闭调试模式时报错的问题汇总
2015/04/22 PHP
PHP实现合并discuz用户
2015/08/05 PHP
thinkPHP模型初始化实例分析
2015/12/03 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
Jquery 1.42 checkbox 全选和反选代码
2010/03/27 Javascript
jquery checkbox实现单选小例
2013/11/27 Javascript
jQuery实现图片文字淡入淡出效果
2015/12/21 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
2017/03/15 Javascript
JQuery Ajax 异步操作之动态添加节点功能
2017/05/24 jQuery
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
微信小程序实现卡片层叠滑动效果
2019/06/21 Javascript
微信小程序实现蒙版弹出窗功能
2019/09/17 Javascript
python Django模板的使用方法(图文)
2013/11/04 Python
python进阶教程之动态类型详解
2014/08/30 Python
Python中decorator使用实例
2015/04/14 Python
python关键字and和or用法实例
2015/05/28 Python
python 日期操作类代码
2018/05/05 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
tensorflow 重置/清除计算图的实现
2020/01/19 Python
HTML5的表单(绝对特别强大的功能)使用示例
2013/06/20 HTML / CSS
HTML最新标准HTML5总结(必看)
2016/06/13 HTML / CSS
H&M旗下高端女装品牌:& Other Stories
2018/05/07 全球购物
Bitiba意大利:在线宠物商店
2020/10/31 全球购物
临床医学专业毕业生的自我评价
2013/10/17 职场文书
物流专业大学的自我评价
2014/01/11 职场文书
信用社员工先进事迹材料
2014/02/04 职场文书
求职教师自荐书
2014/06/19 职场文书
新郎新娘答谢词
2015/01/04 职场文书
监理中标通知书
2015/04/16 职场文书
看上去很美观后感
2015/06/10 职场文书
2022年四月新番
2022/03/15 日漫
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL
PYTHON基于Pyecharts绘制常见的直角坐标系图表
2022/04/28 Python