今天复习了下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. ES数据同步方案

    当业务量上升后,由于mysql对全文检索或模糊查询支持的能力不强,在系统中查询的地方,往往会出现慢sql等,拖累系统其他模块,造成性能低下. 随着ES使用普及率的升高,ES是mysql的一个有效补充. ...

  2. SSIS 从oracle 转数据回MS SQL

    SSIS 从oracle 转数据回MS SQL,转每月的销售记录,大概15000以内,在开发机器上没问题,部署到生产环境出现各种状况“ SSIS 无法从连接伺服器的OLE DB提供者BULK 提取资料 ...

  3. ASP.NET Core搭建多层网站架构【1-项目结构分层建立】

    2020/01/26, ASP.NET Core 3.1, VS2019 摘要:基于ASP.NET Core 3.1 WebApi搭建后端多层网站架构[1-项目结构分层建立] 文章目录 此分支项目代码 ...

  4. Python - 并发编程，多进程，多线程

    传送门 https://blog.csdn.net/jackfrued/article/details/79717727 在此基础上实践和改编某些点 1. 并发编程 实现让程序同时执行多个任务也就是常 ...

  5. STM32内部时钟树

    1.外部晶振是干什么用的? 2.内部晶振是干什么用的? 3.外部晶振频率的大小能影响什么?

  6. Vue中组件之间的通信方式

    vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 本文会介绍组件间通信的8种方式如下图所示, 并介绍在不同的场景下如何选择有效方式实现的 ...

  7. vPC配置

    1.vPC概述 如下图所示,在传统网络中,出于冗余考虑,汇聚层往往由2台设备构成,一台接入层交换机使用2根上联链路,分别连接汇聚层2台设备. 这种拓扑所带来的问题是:受制于STP,对于同一个VLAN的 ...

  8. UCS内存问题排查

    UCS使用双列直插式内存模块(Dual In-line Memory Module (DIMM) )作为RAM模块. 根据文档介绍,主要有如下部分:1.Memory placement <内存放 ...

  9. 洛谷 T8088 RQY的舞会

    嗯... 题目链接:https://www.luogu.org/problem/T8088 这道题很好想,我想的是维护两个小根堆(当然可以用数组模拟) 然后从堆顶开始,如果两个元素的差小于1,则cnt ...

  10. CSS背景透明设置

    style="margin-top:300px;background:rgba(255,255,255,这里设置小于1比如0.6这样); color:black;" style=& ...