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页面加载完执行事件代码
Feb 11 Javascript
编写自己的jQuery提示框(Tip)插件
Feb 05 Javascript
JS实现方向键切换输入框焦点的方法
Aug 19 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
May 03 Javascript
详解JavaScript的BUG和错误
May 07 Javascript
微信小程序实现循环动画效果
Jul 16 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
Aug 19 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
Oct 02 Javascript
使用 Element UI Table 的 slot-scope方法
Oct 10 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
Nov 18 Javascript
javascript的hashCode函数实现代码小结
Aug 11 Javascript
Node与Python 双向通信的实现代码
Jul 16 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/02/26 PHP
laravel中的错误与日志用法详解
2016/07/26 PHP
农历与西历对照
2006/09/06 Javascript
js 在定义的时候立即执行的函数表达式(function)写法
2013/01/16 Javascript
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
获取鼠标在div中的相对位置的实现代码
2013/12/30 Javascript
Javascript快速排序算法详解
2014/12/03 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
JavaScript性能优化总结之加载与执行
2016/08/11 Javascript
JavaScript递归算法生成树形菜单
2017/08/15 Javascript
javascript 缓冲运动框架的实现
2017/09/29 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
基于mpvue的小程序项目搭建的步骤
2018/05/22 Javascript
vue实现同一个页面可以有多个router-view的方法
2018/09/20 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
2018/10/19 Javascript
vue 基于element-ui 分页组件封装的实例代码
2018/12/10 Javascript
详解React中合并单元格的正确写法
2019/01/08 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
iSlider手机端图片滑动切换插件使用详解
2019/12/24 Javascript
详解django.contirb.auth-认证
2018/07/16 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
Python lxml解析HTML并用xpath获取元素的方法
2019/01/02 Python
python turtle库画一个方格和圆实例
2019/06/27 Python
浅析Windows 嵌入python解释器的过程
2019/07/26 Python
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
2014/08/22 HTML / CSS
车祸赔偿收入证明
2014/01/09 职场文书
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书
四风问题个人对照检查材料
2014/09/26 职场文书
机关作风整顿个人剖析材料
2014/10/06 职场文书
2014年学校办公室工作总结
2014/12/19 职场文书
离婚协议书格式
2015/01/26 职场文书
张丽莉观后感
2015/06/16 职场文书
如何用Navicat操作MySQL
2021/05/12 MySQL
Navicat连接MySQL错误描述分析
2021/06/02 MySQL