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 浏览器检测代码精简版
Mar 04 Javascript
中文输入法不触发onkeyup事件的解决办法
Jul 09 Javascript
jQuery实现返回顶部效果的方法
May 29 Javascript
js获取指定字符前/后的字符串简单实例
Oct 27 Javascript
原生js实现选项卡功能
Mar 08 Javascript
正则 js分转元带千分符号详解
Mar 08 Javascript
完美实现js选项卡切换效果(一)
Mar 08 Javascript
JS实现unicode和UTF-8之间的互相转换互转
Jul 05 Javascript
解决vue.js 数据渲染成功仍报错的问题
Aug 25 Javascript
个人小程序接入支付解决方案
May 23 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
Aug 26 Javascript
jQuery实现轮播图效果demo
Jan 11 jQuery
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 Http_Template_IT类库进行模板替换
2009/03/19 PHP
PHP的可变变量名的使用方法分享
2012/02/05 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
PHP标准库 (SPL)――Countable用法示例
2020/06/05 PHP
JQuery 学习笔记 选择器之四
2009/07/23 Javascript
JavaScript 创建对象和构造类实现代码
2009/07/30 Javascript
Javascript 构造函数,公有,私有特权和静态成员定义方法
2009/11/30 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
基于JavaScript实现跳转提示页面
2016/09/24 Javascript
jquery自定义显示消息数量
2017/12/19 jQuery
vue自定义全局组件(自定义插件)的用法
2018/01/30 Javascript
详解vue.js移动端配置flexible.js及注意事项
2019/04/10 Javascript
小程序绑定用户方案优化小结
2019/05/15 Javascript
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
layui 对弹窗 form表单赋值的实现方法
2019/09/04 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
python函数返回多个值的示例方法
2013/12/04 Python
Python实现返回数组中第i小元素的方法示例
2017/12/04 Python
python编写朴素贝叶斯用于文本分类
2017/12/21 Python
ubuntu中配置pyqt4环境教程
2017/12/27 Python
Python实现的径向基(RBF)神经网络示例
2018/02/06 Python
Win7 64位下python3.6.5安装配置图文教程
2020/10/27 Python
python字符串string的内置方法实例详解
2018/05/14 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
python爬取微信公众号文章的方法
2019/02/26 Python
用python做游戏的细节详解
2019/06/25 Python
python多进程并发demo实例解析
2019/12/13 Python
python中p-value的实现方式
2019/12/16 Python
python列表删除和多重循环退出原理详解
2020/03/26 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
企业总经理职责
2014/02/02 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书
mysql字符串截取函数小结
2021/04/05 MySQL
nginx请求限制配置方法
2021/07/09 Servers
根德5570型九灯四波段立体声收音机是电子管收音机的楷模 ? 再论5570
2022/04/05 无线电
MySQL数据库 安全管理
2022/05/06 MySQL