今天复习了下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. IIS 部署 web service

    1.在控制台检查 IIS 功能是否已经全部启用 2.重新注册IIS 3.设定程序池的正确版本

  2. BGP前缀过滤（正则表达式）

    BGP的正则表达式一般用在as-path中,常用的如下: .(点):表示匹配任意一个字符,包括空格. *:表示匹配零个或多个模式的出现.即前一个字符出现0次或多次. +:表示匹配一个或多个模式的出现. ...

  3. Cisco AP-AP重置操作

    Resetting to Default Settings Using the MODE Button/spanFollow these steps to reset the access point ...

  4. java 基础--8 种基本数据类型：整型、浮点型、布尔型、字符型 整型中 byte、short、int、long 的取值范围 什么是浮点型？什么是单精度和双精度？为什么不能用浮点型表示金额？

     一.8种基本数据类型(4整,2浮,1符,1布): 整型:byte(最小的数据类型).short(短整型).int(整型).long(长整型): 浮点型:float(浮点型).double(双精度浮点 ...

  5. request库解析中文

    官网地址: http://cn.python-requests.org/zh_CN/latest/ 高级用法 本篇文档涵盖了 Requests 的一些高级特性. 会话对象 会话对象让你能够跨请求保持某 ...

  6. Dart语言学习(十五) Dart函数方法

    Dart函数方法可分为两类: 一.内置方法/函数: print(); 二.自定义方法: 自定义方法的基本格式: 返回类型 方法名称(参数1,参数2,...){ 方法体 return 返回值; } vo ...

  7. 多项式输出 (0)<P2009_1>

    多项式输出 (poly.pas/c/cpp) [问题描述] 一元n次多项式可用如下的表达式表示: 其中,称为i次项,ai称为i次项的系数.给出一个一元多项式各项的次数和系数,请按照如下规定的格式要求输 ...

  8. 利用正则表达式判断Java中的秒钟、分钟、小时、日、月是否符合规则

    // 定义校验规则 Pattern patRule = Pattern.compile("判断规则"); // 校验结果 patRule.matcher("判断的对象&q ...

  9. Codeforces Round #586 (Div. 1 + Div. 2)E（拓扑排序，思维）

    #include<bits/stdc++.h>using namespace std;int n,m,s; vector<int>edge[200007];queue<i ...

  10. java 实现用户自由选择字段实现导出EXCEL表格

    package com.thinkgem.jeesite.common.utils.excel; import java.io.File; import java.io.OutputStream; i ...