vue实现一个添加删除操作

最新推荐文章于 2023-08-21 14:47:16 发布
最新推荐文章于 2023-08-21 14:47:16 发布
阅读量238 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35758831/article/details/103541321
版权

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>y</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import './base.css'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
})

App.vue

<template>
  <div id="app">
    <div class="todo-container">
      <div class="todo-wrap">
        <!-- <TodoHeader @addTodo="addTodo" /> -->
        <TodoHeader ref="header" />
        <todo-list :todos="todos" />

        <TodoFooter>
          <input type="checkbox" v-model="isAllCheck" slot="checkAll" />
          <span slot="count">已完成{{completeSize}} / 全部{{todos.length}}</span>
          <button class="btn btn-dander" v-show="completeSize" @click="deleteComleteTodos" slot="delete">清除已完成任务</button>
        </TodoFooter>
      </div>
    </div>
  </div>
</template>

<script>
  import TodoHeader from './components/TodoHeader.vue'
  import TodoList from './components/TodoList.vue'
  import TodoFooter from './components/TodoFooter.vue'
  import PubSub from 'pubsub-js'
  import storageUtil from './util/storageUtil'

  export default {
    data() {
      return {
        todos: storageUtil.readTodos()
      }
    },

    computed: {
      completeSize() {
        return this.todos.reduce((preTotal, todo) => preTotal + (todo.complete ? 1 : 0), 0)
      },

      isAllCheck: {
        get() {
          return this.completeSize === this.todos.length && this.completeSize
        },

        set(value) {
          this.selectAllTodos(value)
        }
      }
    },

    mounted() {
      this.$refs.header.$on('addTodo', this.addTodo)

      PubSub.subscribe('deleteTodo', (msg, index) => {
        this.deleteTodo(index)
      })
    },

    methods: {
      addTodo(todo) {
        this.todos.unshift(todo)
      },

      deleteTodo(index) {
        this.todos.splice(index, 1)
      },

      deleteComleteTodos() {
        this.todos = todos.filter(todo => !todo.complete)
      },

      selectAllTodos(check) {
        this.todos.forEach(todo => todo.complete = check)
      }
    },

    watch: { //深度监视
      todos: {
        deep: true, //深度监视
        /* handler: function(value) {
          //window.localStorage.setItem('todos_key', JSON.stringify(value))
          storageUtil.saveTodos(value)
        } */
        handler:storageUtil.saveTodos
      }
    },

    components: {
      TodoHeader,
      TodoList,
      TodoFooter
    }

  }
</script>

<style>
  .todo-container {
    width: 600px;
    margin: 0 auto;
  }

  .todo-container .todo-wrap {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
</style>

base.css

body {
  background: #FFFFFF;
}

.btn-danger {
  color: #fff;
  background-color:#da4f49;
  border: 1px solid #bd362f;
}

.btn-dander:hover {
  color: #FFF;
  background-color: #bd362f;
}

.btn:focus {
  outline: none;
}

TodoHeader.vue

<template>
  <div class="todo-header">
    <input type="text" placeholder="请输入你的任务名称,按回车键确认" @keyup.enter="addItem" v-model="title" />
  </div>
</template>

<script>
  export default {
    props: {

    },
    data() {
      return {
        title: ''
      }
    },

    methods: {
      addItem() {
        //检查输入的合法性
        const title = this.title.trim();
        if (!title) {
          alert('必须输入')
          return
        }
        //根据输入生成一个todo对象
        const todo = {
          title,
          complete: false
        }
        //添加到todos
        //this.addTodo(todo)
        //触发自定义事件
        this.$emit('addTodo', todo)
        //清除输入
        this.title = ''
      }
    }
  }
</script>

<style>
  .todo-header input {
    width: 560px;
    height: 28px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 7px;
  }

  .todo-header input:focus {
    outline: none;
    border-color: rgba(82, 168, 236, 0.8);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.8);
  }
</style>

TodoList.vue

<template>
  <div class="todo-header">
    <input type="text" placeholder="请输入你的任务名称,按回车键确认" @keyup.enter="addItem" v-model="title" />
  </div>
</template>

<script>
  export default {
    props: {

    },
    data() {
      return {
        title: ''
      }
    },

    methods: {
      addItem() {
        //检查输入的合法性
        const title = this.title.trim();
        if (!title) {
          alert('必须输入')
          return
        }
        //根据输入生成一个todo对象
        const todo = {
          title,
          complete: false
        }
        //添加到todos
        //this.addTodo(todo)
        //触发自定义事件
        this.$emit('addTodo', todo)
        //清除输入
        this.title = ''
      }
    }
  }
</script>

<style>
  .todo-header input {
    width: 560px;
    height: 28px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 7px;
  }

  .todo-header input:focus {
    outline: none;
    border-color: rgba(82, 168, 236, 0.8);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.8);
  }
</style>

TodoItem.vue

<template>
  <li @mouseenter="hadnleEnter(true)" @mouseleave="hadnleEnter(false)" :style="{background: bgColor}">
    <label>
      <input type="checkbox" v-model="todo.complete">
      <span>{{todo.title}}</span>
    </label>
    <button class="btn btn-dander" v-show="isShow" @click="deleteItem">删除</button>
  </li>
</template>

<script>
  import PubSub from 'pubsub-js'
  export default {
    props: {
      todo: Object,
      index: Number
    },

    data() {
      return {
        bgColor: 'white', //默认背景颜色
        isShow: false //默认是否显示
      }
    },

    methods: {
      hadnleEnter(isEnter) {
        if (isEnter) {
          this.bgColor = '#aaaaaa'
          this.isShow = true
        } else {
          this.bgColor = 'white'
          this.isShow = false
        }
      },

      deleteItem() {
        const {
          todo,
          index,
          deleteTodo
        } = this
        if (window.confirm(`确认删除${todo.title}吗？`)) {
          //deleteTodo(index)
          PubSub.publish('deleteTodo', index)
        }
      }
    }
  }
</script>

<style>
  /* item */
  li {
    list-style: none;
    height: 36px;
    line-height: 36px;
    padding: 0 5px;
    border-bottom: 1px solid #ddd;
  }

  li label {
    float: left;
    cursor: pointer;
  }

  li label li input {
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
    top: -1px;
  }

  li button {
    float: right;
    margin-top: 3px;
    padding: 6px 12px;
    vertical-align: middle;
    border: 1px solid transparent;
    border-radius: 4px;
    color: white;
  }

  li:before {
    content: initial;
  }

  li:last-child {
    border-radius: none;
  }

  li .btn-dander {
    background: red;
  }
</style>

TodoFooter.vue

<template>
  <div class="todo-footer">
    <label>
      <!-- <input type="checkbox" v-model="isAllCheck"/> -->
      <slot name="checkAll"></slot>
    </label>
    <span>
      <!-- <span>已完成{{completeSize}}</span>/ 全部{{todos.length}} -->
      <slot name="count"></slot>
    </span>
    <!-- <button class="btn btn-dander" v-show="completeSize" @click="deleteComleteTodos">清除已完成任务</button> -->
    <slot name="delete"></slot>
  </div>
</template>

<script>
  export default {

  }
</script>

<style>
  .todo-footer {
    height: 40px;
    line-height: 40px;
    padding-left: 6px;
    margin-top: 5px;
  }

  .todo-footer label {
    display: inline-block;
    margin-right: 20px;
    cursor: pointer;
  }

  .todo-footer label input {
    position: relative;
    top: -1px;
    vertical-align: middle;
    margin-right: 5px;
  }

  .todo-footer button {
    float: right;
    margin-top: 5px;
  }

  button {
    float: right;
    margin-top: 3px;
    padding: 6px 12px;
    vertical-align: middle;
    border: 1px solid transparent;
    border-radius: 4px;
    color: white;
    background: red;
  }
</style>

storageUtil.js

/* 使用locastorage存储数据工具
1.函数
2.对象
需要向外暴露一个功能还是多个功能
*/
const TODOS_KEY = 'todos_key'
export default {
  saveTodos (todos) {
     window.localStorage.setItem(TODOS_KEY, JSON.stringify(todos))
  },

  readTodos() {
    return JSON.parse(window.localStorage.getItem(TODOS_KEY) || '[]')
  }
}

目录结构

在这里插入图片描述

效果图

在这里插入图片描述

qq_35758831
关注
vue实现商品列表的添加删除实例讲解
10-15
在本篇内容里小编给大家分享的是关于vue实现商品列表的添加删除实例讲解，有兴趣的朋友们可以参考下。
vue 增加删除和修改操作
WangDaLi_的博客
06-21 7935
代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="/axios.min.js"> </script&gt...
vue修改删除操作
m0_50884068的博客
07-24 201
// 输入框 <el-input v-model="fenggeval"></el-input> <el-button @click="btnfenggeupdata1()" type="success">修改</el-button> <div v-for="(item, index) of fenggelist" :key="index" > <div>{{ item.name }}</div>
vue 拖动元素到指定区域后进行删除
最新发布
weixin_72589507的博客
08-21 534
vue 拖动元素到指定区域后进行删除，vue拖动元素
任务清单小功能的实现（任务的增、删、改、查、存储）使用Vue实现
日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导
08-28 1055
任务清单（增、删、改、查、存储）。Vue实现
Vue实现动态添加或者删除对象和对象数组的操作方法
10-17
删除操作通常需要根据某些条件（如用户选择的某个标识）来执行。以下是一个删除对象的示例： ```javascript for (let i = 0; i ; i++) { const obj = this.data[i]; if (obj.isDelete) { this.data.splice(i, 1)...
vue实现学生录入系统之添加删除功能
10-18
在本文中，我们将探讨如何使用Vue.js框架来实现一个简单的学生录入系统，该系统包含添加和删除学生信息的基本功能。我们将使用Vue的双向数据绑定（v-model）、列表渲染（v-for）、事件处理（@click）等核心特性来...
使用Bootstrap + Vue.js实现添加删除数据示例
10-20
首先，要实现一个添加删除数据的示例，我们需要引入几个关键的库文件，包括Bootstrap的CSS和JS文件、Vue.js库以及jQuery库。文章中提供了Bootstrap的在线资源链接，这是为了确保可以使用最新版本的Bootstrap框架，...
vue实现添加与删除图书功能
10-17
在前端开发中，Vue.js是一个非常受欢迎的JavaScript框架，它采用数据驱动和组件化的思想，使得开发者能够更加高效地构建交互式的单页面应用。实现添加与删除图书功能是前端开发中常见的功能需求，下面将详细解析使用...
Vue clip(实现todolist页面展示+增删功能模块)
咖啡有点苦的博客
11-04 416
使用Vue实现todolist
在vue2项目中用vuex实现一个可增删的任务栏（四）
M_Nobody的博客
03-22 646
九、实现“清除已完成”功能 1. 在a链接放一个点击事件 clean 2. 写一个对应的方法，触发点击事件时调用 mutations 中的方法 3. 把未完成的过滤出来，再重新赋值给 state 的 list 数组 成功！ 十、实现底部的三个按钮高亮状态可切换 1. 在三个按钮加上判断高亮的三元表达式的属性绑定 和 点击事件（向方法里传递对应的 key 值） 2. 新建对应方法，传递当前点击的按钮对应的key 值给mutations 中的函数 3....
vue 点击删除常用方式
热门推荐
阿威的博客
09-03 1万+
【代码】vue 点击删除常用方式。
Vue.js note4（事件对象$event&事件修饰符&vue的计算属性）
weixin_43297321的博客
08-12 595
事件对象 语法：<div @click=‘fn($event)’></div>中，$event为事件对象（固定写法） 作用：记录事件相关的信息 <div id="demoSky"> <!-- 事件对象 $event 必须这样写--> <!-- 点谁谁变色的例子 --> <ul> <li v-for="(item,index) in arr" @click="fun($even
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"> <!-- 引.
vue实现删除操作
q1054007919的博客
01-27 3626
commonConfig.ajaxLoad('individual/getName', params, (res) => { const {total, list} = res; this.viewData = list; this.page.total = total; for (let i = 0; i < this.viewData.length; i++)..
vue--实现动态添加和删除
qq_54884162的博客
10-22 1302
1.时间对象转化为字符串的函数 时间对象.toLocaleString(); vartime1=newDate(); vartime2=time1.toLocaleString(); 2.超链接设置在表格中，点击事件后可分条删除。这里特殊：可传参函数 <ahref="#"@click="Delete(row.ID)">删除</a> 3.需要注意的问题： 如何设置表格？<template>模板的应用 在表格中按钮的双向数据绑定绑定的...
vue实现任务列表的添加， 选择，删除
qq_41505416的博客
08-14 1049
<!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&lt
VUE-列表的添加、删除、搜索操作
LzzMandy的博客
03-19 2995
页面结构如下： 列表dom结构如下： <table class="table table-bordered table-hover table-striped"> <thead> <tr> <th>Id</th> <th>Name</th&gt...
vue 中对数组的删除操作
weixin_44068198的博客
10-13 3622
var arr = ['a','b','c','d','e','f','g','h','i']; for(let i=0;i<arr.length;i++){ // arr.splice(i,1);//(循环删除所有元素)i是索引，1是长度，null的意思是该元素替换为null if(i==2){ arr.splice(i,1);//删除第2个元素 arr.splice(i+2,1,null);//把第4个位置的元素替换为null .
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值