vue中 简单的添加删除功能实现

最新推荐文章于 2024-07-17 08:39:25 发布
最新推荐文章于 2024-07-17 08:39:25 发布
阅读量2k 收藏 2
点赞数
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/renxiaoxing55/article/details/108319937
版权 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./vue.js"></script>
  <link rel="stylesheet" href="./index.css">
</head>
<body>

  <div id="app">
    <div class="header">
      <div class="container">
        <div class="logo">toDoList</div>
        <div class="input-area">
          <input type="text" @input="handleInput" :value="curMask"/>
          <button @click="addMask">添加</button>
        </div>
      </div>
    </div>
    <div class="container">
      <h2>
        <span>正在进行</span>
        <span class="mask-num">{{ needDoList.length }}</span>
      </h2>
      <ul class="mask-list">
        <li
          v-for="(mask, index) in needDoList"
          :key="mask.id"
        >
          <div>
            <input type="checkbox" @change="doCheck(index, 'need')"/>
            <span>{{ mask.title }}</span>
          </div>
          <button @click="deleteMask(index, 'need')">删除</button>
        </li>
      </ul>
    </div>
    <div class="container">
      <h2>
        <span>已经完成</span>
        <span class="mask-num">{{ completeList.length }}</span>
      </h2>
      <ul class="mask-list complete-list">
        <li
          v-for="(mask, index) in completeList"
          :key="mask.id"
        >
          <div>
            <input type="checkbox" @change="doCheck(index, 'complete')"/>
            <span>{{ mask.title }}</span>
          </div>
          <button @click="deleteMask(index, 'complete')">删除</button>
        </li>
      </ul>
    </div>
  </div>

  <script>

    const vm = new Vue({
      el: '#app',
      data: {
        curMask: '',
        needDoList: [],   //接收   正在进行的数组
        completeList: []   //已经完成
      },
      methods: {
        handleInput (e) {
          this.curMask = e.target.value;   //获取input的值
        },
        addMask () {
          //this.needDoList.push(this.curMask)
          if(this.curMask === '') { return };   //如果输入的input值为空 直接返回
          this.needDoList.push({    //点击按钮 将input的值添加到 正在进行noodDoList的数组当中
            title: this.curMask,    //添加的是字符串  字符串没有title和对象  需要转化为对象
            id: Math.random()
          });
          this.curMask = '';     //按钮添加之后  input为空
        },
        doCheck (index, type) {

          if(type === 'need') {     //点击checkbox ,正在进行变为已经完成  为了区分正在进行和已经完成,设置type
            const completeMask = this.needDoList.splice(index, 1);
            this.completeList.push(...completeMask);
          } else {
            const noCompleteMask = this.completeList.splice(index, 1);
            this.needDoList.push(...noCompleteMask);
          }
        },
        deleteMask (index, type) {    //已经完成和正在进行 都是点击删除按钮进行删除  为了区分 设置type
          const toDoList = type === 'need' ? this.needDoList : this.completeList;  //如果type=need 则删除是needDoList  否则删除的是completeList
          toDoList.splice(index, 1);
        }
      }
    })



   
    
  </script>
</body>
</html>
认真的小蜗牛
关注
专栏目录
前端学习（2075）：计算属性的基本使用
歌谣的博客
08-27 411
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&gt...
vue实现简单的添加和删除
qq_59717525的博客
11-08 1510
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 引.
CSS背景属性
weixin_30386713的博客
07-02 908
背景颜色属性(background-color) 这个属性为HTML元素设定背景颜色，相当于HTML中bgcolor属性。body {background-color:#99FF00;} 上面的代码表示Body这个HTML元素的背景颜色是翠绿色的。 演示示例 背景图片属性(background-image) 这个属性为HTML元素设定背景图片，相当于HTML中background属性。&...
Vue 中根据对象数组下标修改和删除内容的实现方法
最新发布
李长渊的博客
07-17 1403
Vue 中根据对象数组下标修改和删除内容的实现方法
HTML5中背景图片如何设置
qq_41886231的博客
08-06 1万+
我觉得网页背景设置成这样子已经挺不错的了～我很满意～～～ 首先先看一下效果吧，差的效果图我就不放了： 可能第二张图片截图有点大，导致博客显示不太妙。那直接上代码吧： body { /*background: rgb(185, 246, 246);*//*设置颜色背景*/ background-image: ...
嵌套iFrame使用postMessage相互传递消息（嵌套iFrame、跨父子窗口、跨页面）.zip
01-06
demo地址：http://www.tkcb.cc/menu/blog/html/html_0001/index.html 练习说明：使用postMessage可以在iFrame、父子窗口、跨页面等，之间相互传递消息。 你好，我是TKCB-GO，一个有着游戏策划梦想，却沦为程序员的游戏家，这是我的技术博客：www.tkcb.cc 技术博客网站里面，除了我的技术分享，还有我们乐队推荐的游戏、软件、电影、作品、超赞链接推荐等等。 最后，我会在CSDN陆续分享我的大量的（至少几百个）技术练习、经验等，希望大家多多交流，相互学习。
iframe PostMessage 实现父子组件的传值
rolinabc的博客
03-31 1万+
我们都知道可以使用iframe可以把一个页面嵌套到另外一个页面内部进行显示,那么这两个页面如何进行传值交互呢, 下面我们就简单的来看一下 首先,新建两个文件,parant.html和child.html(在这里我使用的是vue语法哈~) 首先是将child.html的内容嵌入parent.html中,代码如下所示: <div id="app"> <iframeid="child" src="http://127.0.0.1:5500/...
vue实现修改和删除功能
qq_42802941的博客
09-24 406
vue实现修改和删除功能
vue实现学生录入系统之添加删除功能
10-18
在本文中，我们将探讨如何使用Vue.js框架来实现一个简单的学生录入系统，该系统包含添加和删除学生信息的基本功能。我们将使用Vue的双向数据绑定（v-model）、列表渲染（v-for）、事件处理（@click）等核心特性来...
vue与bootstrap实现简单用户信息添加删除功能
10-17
在本文中，我们将详细探讨如何利用Vue.js框架与Bootstrap库来实现一个简单的用户信息添加与删除功能。这个过程包括了用户界面的设计、前后端数据的交互以及组件的使用。本文所涉及的知识点主要集中在以下几个方面： ...
Vue实现todolist删除功能
08-27
在本文中，我们将深入探讨如何使用Vue.js框架来实现一个基本的待办事项列表（Todo List）应用，特别是关注删除功能的实现。Vue.js是一个轻量级的前端JavaScript框架，以其响应式数据绑定和组件化特性而受到广泛欢迎...
html5背景图片自适应代码.zip
07-04
html5背景图片自适应代码是一款背景不随滚动条滚动，会根据分辨率不同自动匹配对应的背景图片。
Vue实现动态添加或者删除对象和对象数组的操作方法
10-17
总的来说，Vue 实现动态添加或删除对象和对象数组的关键在于理解数据驱动视图的原理，即通过修改 `data` 中的数组来更新视图。使用 `push`、`splice` 等数组方法，结合 Vue 的响应式系统，可以轻松实现这类功能。...
使用Bootstrap + Vue.js实现添加删除数据示例
10-20
首先，要实现一个添加删除数据的示例，我们需要引入几个关键的库文件，包括Bootstrap的CSS和JS文件、Vue.js库以及jQuery库。文章中提供了Bootstrap的在线资源链接，这是为了确保可以使用最新版本的Bootstrap框架，...
HTML5 body设置全屏背景图片
热门推荐
Jq的博客
10-20 2万+
之前这样加背景图测出来有的手机浏览器上全屏背景图宽度超过屏幕宽度,比如mate9上 &amp;lt;div class='box'&amp;gt;&amp;lt;/div&amp;gt; html,body{ width:100%; height:100% } .box{ width: 100%; height: 100%; background: url(a.jpg) no-repea...
33.html5设置背景
越努力越幸运的博客
05-01 2418
文章目录html5设置背景设置背景图片（background-image)设置背景图片的重复样式(background-repeat)设置背景位置（background-position）设置背景的范围（background-clip）设置图片的原点(background-origin)设置背景的尺寸（background-size）设置背景的简写属性（background） html5设置背景 设置背景图片（background-image) 直接使用以下样式设置样式即可。 background-ima
自己编写jQuery插件 之 无缝滚动
weixin_30883311的博客
08-02 244
一. 效果图 二. Html骨架结构 <div class="box"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> ...
jQuery Scroll (jQuery平滑滚动) 插件
MemRay
01-22 8003
原文转自：http://blog.netsh.org/posts/jquery-scroll_690.netsh.html# 这里是官网的链接：http://demos.flesler.com/jquery/scrollTo/ scrollTo还有很多别的丰富的功能，可以从demo中窥得一二。 是不是很想实现页面平滑滚动的效果呢？既美观又不唐突，而且还能自己控制速度，岂不是一个很好的效果吗？
liMarquee – jQuery无缝滚动插件
MyNameIsXiaoLai的博客
01-18 671
http://www.dowebok.com/188.html
Vue 实现todolist的添加删除功能
06-07
好的，下面是一个简单的 Vue 实现 todolist 的添加删除功能的代码示例： ```html <!DOCTYPE html> <html> <head> <title>Vue TodoList</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <h1>TodoList</h1> <input type="text" v-model="newTodo"> <button @click="addTodo">Add</button> <ul> <li v-for="(todo, index) in todos"> {{ todo }} <button @click="removeTodo(index)">Delete</button> </li> </ul> </div> <script> var app = new Vue({ el: '#app', data: { newTodo: '', todos: [] }, methods: { addTodo: function() { if (this.newTodo != '') { this.todos.push(this.newTodo); this.newTodo = ''; } }, removeTodo: function(index) { this.todos.splice(index, 1); } } }) </script> </body> </html> ``` 在这个示例中，我们首先定义了一个包含两个属性的 Vue 实例，分别是 `newTodo` 和 `todos`。`newTodo` 表示用户输入的待办事项，`todos` 表示所有已添加的待办事项列表。 然后，我们定义了两个方法，`addTodo` 和 `removeTodo`，来实现添加和删除待办事项的功能。在 `addTodo` 方法中，我们首先判断用户输入的待办事项是否为空，如果不为空，则将其添加到 `todos` 列表中，并清空 `newTodo`。在 `removeTodo` 方法中，我们通过 `splice` 方法从 `todos` 列表中删除指定索引的待办事项。 最后，我们在页面中使用 `v-model` 指令绑定用户输入的待办事项到 `newTodo` 属性上，使用 `v-for` 指令循环渲染 `todos` 列表，并在每个待办事项后面添加一个删除按钮，通过 `@click` 绑定 `removeTodo` 方法来实现删除功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值