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

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

<!DOCTYPE html>

<html>

<head>

    <title>todo-list</title>

</head>

<script type="text/javascript" src="./vue.js"></script>

<body>

    <div id="app">

        <input type="text" v-model="inputValue">

        <button @click="handleBtnClick">提交</button>

        <ul>

            <li v-for="(item, index) in list">{{item}} <button @click="handleBtnDel(index)"> X </button></li>

        </ul>

    </div>

</body>

<script>

    let app = new Vue({

        el: "#app",

        data: {

            list: [],

            inputValue:''

        },

        methods: {

            handleBtnClick: function() {

                this.list.push(this.inputValue)

                this.inputValue = ''

            },

            handleBtnDel: function(index) {

                this.list.splice(index,1)

            }

        }

    })

</script>

</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. 《JavaScript高级程序设计》读书笔记（三）基本概念第二小节 Number类型

    内容---语法 上一小节---数据类型 本小节 number类型---流程控制语句---理解函数 number类型--使用IEEE754格式来表示整数和浮点数值(双精度数值)--规定了数值字面量格式, ...

  2. python基础（二）---第一个程序

    1. 第一个程序 1.1 Hello Python书写步骤 步骤一:新建文本文档文件,修改名称为hello.py 步骤二:使用记事本打开文件,书写程序内容如下: 步骤三:打开命令行,输入执行指令:py ...

  3. springMVC的跳转

    服务器内部跳转: return "forward:/forward/test1";  或者 request.getRequestDispatcher(path).forward(r ...

  4. 3_08_MSSQL课程_Ado.Net_子查询

    子查询 1.把一个查询结果作为一个表来使用,就是子查询. 2.把一个查询结果作为一个 表达式进行使用就是子查询. (分页Sql)

  5. 疫情对国内5G发展的影响

    导读 2020年春节期间,“新型冠状病毒”引发了自SARS之后又一次全国性疫情,而世卫组织也将之列为国际关注的突发公共卫生事件,随后多国发布了针对中国的旅行警告和入境限制,从当前情况来看,疫情对中国各 ...

  6. 【PAT甲级】1045 Favorite Color Stripe (30 分)（DP）

    题意: 输入一个正整数N(<=200),代表颜色总数,接下来输入一个正整数M(<=200),代表喜爱的颜色数量,接着输入M个正整数表示喜爱颜色的编号(同一颜色不会出现两次),接下来输入一个 ...

  7. Fleck WebSocket使用

    Fleck WebSocket使用 作为笔记存储. 最近公司有这方面的使用需求.在网上查了一些资料后.得到了想要的结果.以下记录摘抄至网上资料. 1.首先,服务端.项目NuGet直接引用Fleck类库 ...

  8. 【JavaWeb】JSP常用内置对象

    session //a页面 <% request.getSession().setAttribute("key","session");%> < ...

  9. ZkApi的方法跨域访问ZkResource的静态资源文件出现的问题

    问题:ZkApi的方法跨域访问ZkResource的静态资源文件出现下面的情况 解决方法: cd /usr/local/apache/conf/vhost vim .conf 将上面的文件php_ad ...

  10. lnmp1.5安装memcache

    1.安装libevent 由于Memcache用到了libevent这个库用于Socket的处理,所以需要安装libevent. # wget http://www.monkey.org/~provo ...