今天复习了下vue.js,先做了个基本版的todolist,做完后自己想加个删除本项的按钮。一开始做没啥头绪了，试了试无果，查了一把后发现网上的那些方法真的是麻烦，自己动手丰衣足食，自己最后换了思路试了试，果然出来了。

li里边加了个删除按钮，对应着加上了个删除的方法，li循环里边要顺便取下此项的index值，然后在删除方法中作为参数传到下边逻辑代码中，在你点击哪个项的删除按钮的时候方法会把此项的index值传过去，在方法中再使用splice()方法删除数据中的此项就可以了，data发生改变视图层会自动跟随变化，好了，话不多说，上码！

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>todo-list</title>
  5. </head>
  6. <script type="text/javascript" src="./vue.js"></script>
  7. <body>
  8.     <div id="app">
  9.         <input type="text" v-model="inputValue">
  10.         <button @click="handleBtnClick">提交</button>
  11.         <ul>
  12.             <li v-for="(item, index) in list">{{item}} <button @click="handleBtnDel(index)"> X </button></li>
  13.         </ul>
  14.     </div>
  15. </body>
  16. <script>
  17.     let app = new Vue({
  18.         el: "#app",
  19.         data: {
  20.             list: [],
  21.             inputValue:''
  22.         },
  23.         methods: {
  24.             handleBtnClick: function() {
  25.                 this.list.push(this.inputValue)
  26.                 this.inputValue = ''
  27.             },
  28.             handleBtnDel: function(index) {
  29.                 this.list.splice(index,1)
  30.             }
  31.         }
  32.     })
  33. </script>
  34. </html>

vue.js使用更简单的方法制作带删除功能的tooolist的更多相关文章

  1. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  2. 分享几个日常调试方法让js调试更简单

    下面分享几个日常调试代码的时候在Console命令行显示你的操作,让你的js调试更简单. console显示信息的命令 在浏览器按f12在console上显示你的文本. <!DOCTYPE ht ...

  3. [转]九个Console命令，让js调试更简单

    转自:九个Console命令,让js调试更简单 一.显示信息的命令 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html ...

  4. 让js调试更简单—console

    一.显示信息的命令 console.log 用于输出普通信息 console.info 用于输出提示性信息 console.error用于输出错误信息 console.warn用于输出警示信息 最常用 ...

  5. 灵活使用 console 让 js 调试更简单

    摘要: 玩转console. 原文:灵活使用 console 让 js 调试更简单 作者:前端小智 Fundebug经授权转载,版权归原作者所有. Web 开发最常用的就是 console.log , ...

  6. vue.js+webpack在一个简单实例中的使用过程demo

    这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...

  7. 【F12】Console命令，让js调试更简单

    Console命令,让js调试更简单 一.显示信息的命令 console.log("normal"); // 用于输出普通信息 console.info("informa ...

  8. .net core2.0添加json文件并转化成类注入控制器使用 让js调试更简单—console

    .net core2.0添加json文件并转化成类注入控制器使用 上一篇,我们介绍了如何读取自定义的json文件,数据是读取出来了,只是处理的时候太麻烦,需要一遍一遍写,很枯燥.那么有没有很好的办法呢 ...

  9. [ASP.NET]更简单的方法：FormsAuthentication登录ReturnUrl使用绝对路径

    转自:http://www.cnblogs.com/dudu/p/formsauthentication-returnurl-absoluteuri.html [ASP.NET]更简单的方法:Form ...

随机推荐

  1. echart 重新加载

    myechart2.clear(); myechart2.setOption(options[1]);

  2. Python - 协议和鸭子类型

    参考: Fluent_Python - P430 wiki 这里说的协议是什么?是让Python这种动态类型语言实现多态的方式. 在面向对象编程中,协议是非正式的接口,是一组方法,但只是一种文档,语言 ...

  3. Cosmetic Bottles - Cosmetic Packaging: What Are The Characteristics Of Trends?

    There are certain differences in products, of which cosmetics are the most obvious. In addition to t ...

  4. java.sql.SQLException: The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represents more than one time.....

    SpringBoot 2.1.4启动时报错 java.sql.SQLException: The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecogniz ...

  5. HDU1540 Turnal Warfare

    线段树保存每个区间的左边最大连续长度和右边最大连续长度~ #include<cstdio> #include<cstring> #include<algorithm> ...

  6. Euler Sums系列（四）

    \[\Large\displaystyle \sum_{n=1}^\infty (-1)^n \frac{H_n}{2n+1}=\mathbf{G}-\frac{\pi}{2}\ln(2)\] \(\ ...

  7. 【PAT甲级】1060 Are They Equal (25 分)（需注意细节的模拟）

    题意: 输入一个正整数N(<=100),接着输入两个浮点数(可能包含前导零,对于PAT已经习惯以string输入了,这点未知),在保留N位有效数字的同时判断两个数是否相等,并以科学计数法输出. ...

  8. linux下的npm安装

    curl --silent --location https://rpm.nodesource.com/setup_10.x | bash - yum install -y nodejs npm in ...

  9. python记录点

    python记录点 文件编码 Unicode使用最少2个字节(1个字节=1BYTE=8bit=一个长度为8的二进制数) 来表示字母和符号等,有时候是4个字节. UTF-8是对Unicode编码的压缩和 ...

  10. 纪录片- 睡眠追踪(Chasing sleep) （共6集）

    传送门:https://www.bilibili.com/bangumi/play/ep120260/ 小贴士传送门:https://www.bilibili.com/video/av11887055 ...