<template><div id="app"><input type="text"  v-model="todo" ref="ip"/><button @click="add()">+新增</button><br/><br/><hr/><ul><li v-for="(item,key) in list">{{key}} {{item}}   ----- <button v-on:click="remove(key)">删除</button></li></ul></div>
</template><script>
export default {name: 'app',data () {return {todo:"",list:[]}    },methods:{add(){var val=this.$refs.ip.value;   或者用this.todo,这两种都可以:this.todo是从model获取input种的值,因为model和view是双向关联。this.$refs.ip.value;则是直接获取view的input的dom节点然后获取text
this.list.push(val);this.todo="";},remove(key){this.list.splice(key,1);}
}
}
</script><style></style>

涉及知识点:

 1 记录:js删除数组中某一项或几项的几种方法
 2 1:js中的splice方法
 3
 4   splice(index,len,[item])    注释:该方法会改变原始数组。
 5
 6 splice有3个参数,它也可以用来替换/删除/添加数组内某一个或者几个值
 7
 8 index:数组开始下标        len: 替换/删除的长度       item:替换的值,删除操作的话 item为空
 9
10 如:arr = ['a','b','c','d']
11
12 删除 ----  item不设置
13
14 arr.splice(1,1)   //['a','c','d']         删除起始下标为1,长度为1的一个值,len设置的1,如果为0,则数组不变
15
16 arr.splice(1,2)  //['a','d']          删除起始下标为1,长度为2的一个值,len设置的2
17
18 替换 ---- item为替换的值
19
20 arr.splice(1,1,'ttt')        //['a','ttt','c','d']         替换起始下标为1,长度为1的一个值为‘ttt’,len设置的1
21
22 arr.splice(1,2,'ttt')        //['a','ttt','d']         替换起始下标为1,长度为2的两个值为‘ttt’,len设置的1
23
24
25
26 添加 ----  len设置为0,item为添加的值
27
28 arr.splice(1,0,'ttt')        //['a','ttt','b','c','d']         表示在下标为1处添加一项‘ttt’
29
30 看来还是splice最方便啦
31
32 2:delete       delete删除掉数组中的元素后,会把该下标出的值置为undefined,数组的长度不会变
33
34 如:delete arr[1]  //['a', ,'c','d']     中间出现两个逗号,数组长度不变,有一项为undefined35 如何使用 pop() 来删除并返回数组的最后一个元素。
36  
 

转载于:https://www.cnblogs.com/fpcbk/p/10753932.html

做一个vue的todolist列表相关推荐

  1. 30分钟!用Django做一个迷你的Todolist!上篇!

    "菜鸟学Python",第"515"篇原创 Python语法简单,功能强大,深受很多同学的喜爱.菜鸟哥以前给大家分享了很多趣味的案例,有基础的语法,趣味的神器库 ...

  2. 动手做一个 vue 右键菜单

    有一个vue的右键菜单的需求,先上网查了一下是否有插件,比如下面这个 1分钟Vue实现右键菜单 https://www.jb51.net/article/226761.htm 一顿操作之后,页面白屏, ...

  3. 跟我一起做一个vue的小项目(十一)

    接下来我们进行的是详情页动态路由及banner布局 先看页面的效果 下面是代码部分 <template><div><div class="banner" ...

  4. 跟我一起做一个vue的小项目(九)

    接下来我们进行的就是城市列表页面数据额动态渲染. 也是在mock数据,进行动态渲染 //city.json {"ret": true,"data":{" ...

  5. vue实战案例:用学过的知识做一个小demo

    学过了前面11个章节的知识,可以说你已经对vue2.0的基础知识有了一定程度的掌握,虽然在真正开发过程中,一些知识的使用会稍有不同,但是别慌,我们会把那部分内容在进阶系列,比如:单文件组件,过渡效果, ...

  6. 如何做一个高权重的网站-成都企业网站建设

    很多站长将网站权重做到1或2 以后,就很难再提高网站权重了.智宇SEO总结9点教你如何打造一个高权重的网站.或许我总结的还不够全面,欢迎大家补充. 1.网站品牌规划. 个人网站我建议是做小而美的,因为 ...

  7. 如何用vue做一个二级联动

    如何做一个像这样二级联动的目录? 先来说说重点和思路:重点在于router-view的使用以及vue-router的配置,思路是两层children的嵌套. 下面开始实现功能. 翻开我们的vue工程的 ...

  8. 使用vue做一个“淘宝“项目(显示商品栏)

    显示商品栏 前言:完成上一篇文章--做出首页 点击跳转 目录: 创建项目文件 删除原有文件 引用资源文件 实现底部导航栏 显示页面 做出首页 显示商品栏 做出分类 一.做出宫格 每次做一个新东西的时候 ...

  9. VUE做一个公共的提示组件,显示两秒自动隐藏,显示的值父组件传递给子组件

    需求:VUE做一个公共的提示组件,显示两秒自动隐藏,显示的值由父组件动态传给子组件. 效果图: 实现步骤: 1.创建一个子组件 Toptips.vue (它就是公共提示组件), optips.vue代 ...

最新文章

  1. python多分类画混淆矩阵_【AI基础】分类器评估一:混淆矩阵、准确率、精确率、召回率、灵敏度、特异度、误诊率、漏诊率...
  2. 8种Python字符串拼接的方法,你知道几种?
  3. 【Python】查找目标值在列表中的索引序号
  4. 【SSL协议】SSL协议详解
  5. 钉钉产品介绍_钉钉正式推出智能OA:免费开放、一站解决“人财物事”管理难题...
  6. php检查运算是否错误,用PHP中的@运算符抑制错误
  7. android 转屏 多个实例,android – 处理appwidget的多个实例
  8. 数据库主从延迟导致查询不准确的解决思路
  9. 【项目经理之修炼】 全文索引
  10. 如何将道具传递给{this.props.children}
  11. CCF201903-4 消息传递接口(100分)【模拟】
  12. Pytorch---训练与测试时爆显存(out of memory)的一个解决方案(torch.cuda.empty_cache())
  13. mysql 直方图_MySQL直方图
  14. 高斯过程回归GPR和多任务高斯过程MTGP原理
  15. TPS、RPS和QPS是什么
  16. HTML常见标签学习
  17. 如何交叉编译openssl、openssl 移植到ARM、IOT设备上
  18. 爬虫系列之爬取1688
  19. 小程序开发外包公司哪家好?
  20. Arya-专业web自动化测试平台

热门文章

  1. _thread_in_vm_Java Thread类的静态void sleep(long time_in_ms,int time_in_ns)方法,带示例
  2. JavaScript中的数组
  3. java bitset_Java BitSet and()方法与示例
  4. 二、规则组织数学模型的建立
  5. 源码 连接mysql_MySql轻松入门系列————第一站 从源码角度轻松认识mysql整体框架图...
  6. Linux系统编程----8(竞态条件,时序竞态,pause函数,如何解决时序竞态)
  7. 校门外的树——树状数组+区间修改
  8. linux网络编程:使用多进程实现socket同时收发数据
  9. wait、waitpid
  10. 1057 数零壹 (20 分)