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的设计模式
Nov 22 Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
Sep 28 Javascript
JavaScript中prototype为对象添加属性的误区介绍
Oct 15 Javascript
js用Date对象的setDate()函数对日期进行加减操作
Sep 18 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
Nov 02 Javascript
jQuery Mobile 触摸事件实例
Jun 04 Javascript
Vue.js Ajax动态参数与列表显示实现方法
Oct 20 Javascript
浅谈键盘上回车按钮的js触发事件
Feb 13 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
微信小程序实现签到功能
Oct 31 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
Feb 09 Javascript
JS实现烟花爆炸效果
Mar 10 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
雄兵连:天使彦天使彦为爱折翼,彦和炙心同时念动的誓言!
2020/03/02 国漫
Classes and Objects in PHP5-面向对象编程 [1]
2006/10/09 PHP
用windows下编译过的eAccelerator for PHP 5.1.6实现php加速的使用方法
2007/09/30 PHP
微信公众平台之快递查询功能用法实例
2015/04/14 PHP
PHP二维数组去重算法
2016/12/17 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
form表单传递数组数据、php脚本接收的实例
2017/02/09 PHP
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
Prototype String对象 学习
2009/07/19 Javascript
JS动态添加iframe的代码
2015/09/14 Javascript
Javascript设计模式之观察者模式(推荐)
2016/03/29 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
2018/03/05 Javascript
vue使用jsonp抓取qq音乐数据的方法
2018/06/21 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
2018/07/06 Javascript
浅谈微信小程序flex布局基础
2018/09/10 Javascript
JavaScript判断数组类型的方法
2019/10/23 Javascript
js实现双人五子棋小游戏
2020/05/28 Javascript
解决Antd 里面的select 选择框联动触发的问题
2020/10/24 Javascript
Vant picker 多级联动操作
2020/11/02 Javascript
python获取当前用户的主目录路径方法(推荐)
2017/01/12 Python
win8下python3.4安装和环境配置图文教程
2018/07/31 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
Ubuntu20.04环境安装tensorflow2的方法步骤
2021/01/29 Python
HTML5拖放API实现拖放排序的实例代码
2017/05/11 HTML / CSS
雅萌 (YA-MAN) :日本美容家电领域的龙头企业
2017/05/12 全球购物
土木工程应届生求职信
2013/10/31 职场文书
电子商务应届生求职信
2013/11/16 职场文书
董事长助理工作职责范本
2014/07/01 职场文书
学生不讲诚信检讨书
2014/09/29 职场文书
房产分割协议书范文
2014/11/21 职场文书
离婚协议书的范本
2015/01/27 职场文书
毕业设计论文致谢词
2015/05/14 职场文书
法律意见书范本
2015/06/04 职场文书
动画《新网球王子 U-17 WORLD CUP》希腊队PV公开
2022/04/02 日漫