今天复习了下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. 应用 AddressSanitizer 发现程序内存错误

    作为 C/ C++ 工程师,在开发过程中会遇到各类问题,最常见便是内存使用问题,比如,越界,泄漏.过去常用的工具是 Valgrind,但使用 Valgrind 最大问题是它会极大地降低程序运行的速度, ...

  2. windows 域控用户记住最后一次登录用户名

    1,记住最后一次登录用户名 运行 gpedit.msc命令 禁用设置

  3. Python爬虫老是被封的解决方法【面试必问】

    在爬取的过程中难免发生 ip 被封和 403 错误等等,这都是网站检测出你是爬虫而进行反爬措施,在这里为大家总结一下 Python 爬虫动态 ip 代理防止被封的方法. PS:另外很多人在学习Pyth ...

  4. 前x个数据中至少有m个元素最小值与最大值之差不超过K

    题意 给一组数据,从左到右开始,寻找最小的x,使得第1个元素到第x个元素中,至少存在m个数据,最小值与最大值之差不超过K. INPUT 第一行是T,代表数据组数 每组数据的第一行是三个整数,n.m.k ...

  5. 【代码学习】PYTHON 文件I/O

    一.文件的打开和关闭 open(文件名,访问模式) cloese() 模式 描述 r 以只读方式打开文件.文件的指针将会放在文件的开头.这是默认模式. rb 以二进制格式打开一个文件用于只读.文件指针 ...

  6. windows 配置hadoop环境

    在idea运行spark程序的时候报错:java.io.IOException: Could not locate executable null\bin\winutils.exe in the Ha ...

  7. 【Hibernate HQL】

    HibernateHQL public class HibernateHQL { //演示聚集函数使用 @Test public void testSelect7() { SessionFactory ...

  8. Python安装numpy,pandas慢，超时报错，下载不了的解决方法

    由于python的默认源是国外的,所以下载的时候会很慢,甚至会出现超时下载失败,提供两个解决方法 1.设置pip的超时限制 打开cmd 输入pip --default-timeout=100 inst ...

  9. Python基础入门语法1

    PY的交换值的方法 x.y = y.x PY既具有动态脚本的特性,又有面向对象的特性 PY的缺点: 编译型的语言(C++,C):通过编译器进行编译成机器码,越接近底层,开发效率低 解释型代码:PY和J ...

  10. C语言中的快速排序函数

    C库中有自带的快排函数 qsort() ; 它的函数原型为: void qsort(void * , size_t ,size_t size , int (__cdecl *)(const  void ...