今天复习了下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. 「NOIP2016」蚯蚓

    传送门 Luogu 解题思路 很容易想到用一个堆去维护,但是复杂度是 \(O((n+m)\log(n+m))\) 的,显然过不了 \(7e6\). 其实这题有一个性质: 先被切开的蚯蚓,得到的两条新蚯 ...

  2. P1893山峰瞭望

    传送门 看完这个题,大家都懂意思吧,然后代码呢,emmmmm #include <bits/stdc++.h> using namespace std; const int maxn = ...

  3. VS中编码格式的问题(待总结)

    今天又遇到这样的事情了,VS中代码明明是正确的,却报某个变量未定义.百思不得解,前面增加了一个换行之后,竟然又神奇般的复原了. 最后确认是编码格式的问题,后来把有问题的那部分代码粘贴到微软的" ...

  4. win10上的程序兼容win7、xp等

  5. Android Studio如何更新support repository

    转自: http://blog.csdn.net/sinat_29696083/article/details/70256377 刚进新公司,熟悉新业务中.老大叫我看看关于ConstraintLayo ...

  6. cmd设置utf8编码

    在中文windows系统中,如果一个文本文件是utf-8编码的,那么在cmd.exe命令行窗口(所谓的dos窗口)中不能正确显示文件中的内容.在默认情况下,命令行窗口中使用的代码页是中文或者美国的,即 ...

  7. Win10 在 CUDA 10.1 下跑 TensorFlow 2.x

    深度学习最热的两个框架是 pytorch 和 tensorflow,pytorch 最新版本是 1.3,tensorflow 最新版本为 2.0,在 win10 下 pytorch 1.3 要求的 c ...

  8. Steam 游戏 《The Vagrant（流浪者）》修改器制作-[先使用CE写，之后有时间的话改用CheatMaker]（2020年寒假小目标08）

    日期:2020.02.07 博客期:146 星期五 [温馨提示]: 只是想要修改器的网友,可以直接点击此链接下载: 只是想拿CT文件的网友,可以直接点击此链接下载: 没有博客园账号的网友,可以将页面下 ...

  9. DC: 8-Write-up

    下载地址:点我 哔哩哔哩:点我 信息收集 确定网段,找到虚拟机的IP,扫端口和服务. ➜ ~ nmap -sn 192.168.116.1/24 Starting Nmap 7.80 ( https: ...

  10. ImageMagick PDF到JPG有时会导致黑色背景

    convert -verbose -density 300 -quality 50 -background white -alpha remove 0.pdf 0.jpg magick convert ...