vue--待办事项--demo

最新推荐文章于 2024-06-16 16:00:47 发布
最新推荐文章于 2024-06-16 16:00:47 发布
阅读量666 收藏 2
点赞数 1
分类专栏： Vue 前端后端demo 三-框架类
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DcTbnk/article/details/107202867
版权

完成一：用splice删除

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>todolist</title>
    <!-- Latest compiled and minified CSS -->
    <link
      rel="stylesheet"
      href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
    />
  </head>
  <body>
    <div class="container" id="app">
      <div class="panel panel-info">
        <div class="panel-heading">
          <h3 class="panel-title">待办事项</h3>
        </div>
        <div class="panel-body">
          <input
            type="text"
            class="form-control"
            v-model="txt"
            placeholder="请输入代办事项"
            @keyup="save"
          />

          <ul class="list-group">
            <li class="list-group-item" v-for="todo in todos" :key="todo.id">
              <div class="checkbox">
                <label>
                  <input type="checkbox" v-model="todo.checked" />

                  {{todo.status===0?'【未完成】':'【已完成】'}}{{todo.content}}
                  <button
                    type="button"
                    @click="todo.status=1"
                    class="btn btn-info btn-sm"
                    v-show="todo.status==0"
                  >
                    完成
                  </button>
                  <button
                    @click="delOne(todo)"
                    type="button"
                    class="btn btn-danger btn-sm"
                  >
                    删除
                  </button>
                </label>
              </div>
            </li>
          </ul>

          <div class="checkbox">
            <label>
              <input type="checkbox" v-model="checkAll" />
              全选
              <button @click="endChecked">完成</button>
            </label>
          </div>
        </div>
      </div>
    </div>
    <script src="./libs/vue.js"></script>
    <script>
      // { id: 1,content: '起床', status: 0 }
      new Vue({
        el: "#app",
        data: {
          txt: "",
          todos: [],
        },
        methods: {
          save(e) {
            if (e.keyCode === 13) {
              this.todos.push({
                id: Date.now(),
                content: this.txt,
                status: 0,
                checked: false,
              });
              this.txt = "";
            }
          },
          delOne(item) {
            // var index = ;
            this.todos.splice(
              this.todos.findIndex((i) => i.id === item.id),
              1
            );
          },
          endChecked() {
            this.todos
              .filter((item) => item.checked)
              .forEach((item) => (item.status = 1));
          },
        },
        computed: {
          checkAll: {
            get() {
              if (this.todos.length == 0) {
                return false;
              }
              return (
                this.todos.filter((item) => item.checked).length ===
                this.todos.length
              );
            },
            set(v) {
              this.todos.forEach((item) => (item.checked = v));
            },
          },
        },
      });
    </script>
  </body>
</html>

完成二：用v-if删除

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

</head>


<body>
    <!-- html -->
    <div id="app" class="container">

        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">待办事项</h3>
            </div>
            <div class="panel-body">

                <input type="text" class="form-control" placeholder="请输入待办事项" v-model="oneList.txt" @keydown="save">


                <ul class="list-group">
                    <li class="list-group-item" v-for="(item,index) in list" :key="item.id" v-if="item.isIf">

                        <div class="checkbox">
                            <label>
                                <input type="checkbox" v-model="item.checked">
                                {{item.status==0?'【未完成】':'【已完成】'}} {{item.txt}}
                                <button @click="item.status=1" type="button" class="btn btn-info btn-sm"
                                    v-show="item.status==0">完成</button>
                                <button @click="item.isIf=false" type="button" class="btn btn-danger btn-sm">删除</button>
                            </label>
                        </div>

                    </li>

                </ul>


                <div class="checkbox">
                    <label>
                        <input type="checkbox" v-model="checkAll">全选
                        <button @click="endChecked">完成</button>
                    </label>
                </div>


            </div>
        </div>

    </div>
    <!-- js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                oneList: {
                    id: Date.now(),
                    txt: '',
                    isIf: true,
                    status: 0,
                    checked: false,
                },
                list: [],
            },
            methods: {
                save(e) {
                    if (e.keyCode == 13) {
                        this.list.push({
                            ...this.oneList
                        });
                    }
                    this.oneList.txt = "";
                },
                endChecked() {
                    this.list
                        .filter(item => item.checked)
                        .forEach(item => item.status = 1);
                },
            },
            computed: {
                checkAll: {
                    set(v) {
                        this.list.forEach(item => item.checked = v);
                    },
                    get() {
                        if (this.list.length == 0) {
                            return false;
                        }
                        return this.list.length === this.list.filter(item => item.checked).length;
                    },
                },
            },
        });
    </script>
</body>

</html>

写法一（没有全选完成）

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- Latest compiled and minified CSS & JS -->
    <link rel="stylesheet" media="screen" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

    <style>
        .form2 {
            border: 1px solid rgb(214, 211, 211);
            border-radius: 5px;
            height: 60px;
            line-height: 60px;
            padding-left: 6px;
        }

        .form2 button {
            margin-top: -4px;
        }

        .form2 span {
            margin: 0 5px;
        }
    </style>

</head>

<body>
    <!-- html -->
    <div class="container" id="app">
        <!-- <form action="" method="POST" role="form"> -->
        <legend>今日任务完成情况</legend>

        <div class="form-group">
            <label for="">事项</label>
            <input type="text" class="form-control" id="" placeholder="输入代办内容" v-model="oneList.txt" required>
        </div>

        <button type="submit" class="btn btn-primary" id="btnSub" @click="btnSub">提交</button>
        <!-- </form> -->
        <div class="form-inline form2" v-for="(item,index) in list" :key="index" v-if="item.isIf">
            <div v-if="item.isIf">
                <div class="form-group">
                    <span>{{item.status}}</span>
                    <span>{{item.txt}}</span>
                </div>
                <button type="submit" class="btn btn-default" v-show="item.isShow" @click="finishBtn(item)">完成</button>
                <button type="submit" class="btn btn-default" @click="deleteBtn(item)">删除</button>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                // status: "【未完成】",
                // txt: '',
                // isShow: true,
                // isIf: false,
                oneList: {
                    status: "【未完成】",
                    txt: '',
                    isShow: true,
                    isIf: true,
                },
                list: [],
            },
            methods: {
                btnSub() {
                    this.list.push({
                        ...this.oneList
                    });
                    this.oneList.txt = '';
                },
                finishBtn(item) {
                    item.status = '【已完成】';
                    item.isShow = false;
                },
                deleteBtn(item) {
                    item.isIf = false;
                },
            },
        });
    </script>
</body>

</html>

写法二（没有全选完成）

在这里插入图片描述
@keyup.enter=“函数名”

<style>
        h6{
            font-size: 18px;
            margin: 0;
        }
    </style>
  </head>
  <body>
    <div id="app">
      <h6>事项</h6>
      <input type="text" placeholder="请输入代办内容" v-model="txt" @keyup.enter="tijiao"/>
      <br>
      <input type="button" @click="tijiao" value="提交"/>
      <ul>    
        <li v-for="(item,index) in list" :key="index">
            <span>{{item.txtstau}}</span>              
                 <span>{{item.txt}}</span>
                 <!-- <button @click="item.status=true" v-show="!item.status"></button> -->
            <input type="button" value="完成" v-show="item.isShow" @click="wancheng(index,item)" />
            <input type="button" value="删除"  @click="del(index)" />
        </li>
    </ul>
      </div>
    </div>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
  <!-- <script src="./libs/vue.js"></script> -->
  <script>
    new Vue({
      el: "#app",
      data: {
        txt: "",
        list: [], 
      },
      methods: {
        tijiao() {
          this.list.push({  
            id: new Date() * 1,
            txtstau: "【未完成】",
            txt: this.txt,
            isShow:true,
        });
          this.txt="";
        },
        wancheng(index,item){  
            console.log(item); 
            item.txtstau = "【完成】";     
            item.isShow = false;  
        },
        del(index){
            this.list.splice(index, 1);          
       }
      },
    });
  </script>在这里插入代码片

写法三（超全 全选完成删除）

在这里插入图片描述
@keyup=“函数名” 里面用e.keyCode==13

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <style>
        ul,
        li {
            list-style: none;
        }

        table {
            margin-top: 3rem;
        }

        td,
        th {
            text-align: center;
        }

        button {
            outline: none;
        }
    </style>
</head>

<body>

    <div class="container" id="app">
        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">toDoList练习</h3>
            </div>
            <div class="panel-body">

                <input type="text" class="form-control" @keyup.enter="addData" v-model='iptVal'>

                <table class="table table-hover table-bordered">
                    <thead>
                        <tr>
                            <th><input type="checkbox" v-model='allChecked'>序号</th>
                            <th>待完成事件</th>
                            <th>完成状态</th>
                            <th>操作(不完成不能删除)</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for='(item, key) in msg'>
                            <td :style="item.style"><input type="checkbox" v-model='item.checked'>{{key+1}}</td>
                            <td :style="item.style">{{item.event}}</td>
                            <td :style="item.style">{{!item.bool1 ? "已完成" : "未完成"}}</td>
                            <td>

                                <!-- v-show为假时隐藏标签 -->
                                <button type="button" class="btn btn-success"
                                    @click="changeStyle(item, 'yellow', false)" v-show='item.bool1'>完成</button>
                                <button type="button" class="btn btn-warning" @click="msg.splice(key,1)"
                                    :disabled="item.bool1==true?true:false">删除</button>
                            </td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td>
                                <button type="button" class="btn btn-success" @click="allSucess()">全部完成</button>
                            </td>

                            <td>
                                <button type="button" class="btn btn-warning" @click="delCompleted">删除已完成</button>
                            </td>
                            <td>
                                <button type="button" class="btn btn-danger" @click="allDel">全部删除</button>
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let app = new Vue({

            el: '#app',

            data: {
                iptVal: "",
                msg: [],
            },

            methods: {

                // 添加数据
                addData: function () {

                    let obj = {};

                    obj.id = this.msg.length + 1;

                    obj.event = this.iptVal;

                    // 用来判断是否选中
                    obj.checked = false;

                    // 用来判断是否完成
                    obj.bool1 = true;

                    this.msg.push(obj);
                },

                changeStyle(item, color, bool1) {

                    item.style = {

                        // color: color,
                        backgroundColor: color,
                    }
                    item.bool1 = bool1;
                },

                // 全部完成
                allSucess() {

                    this.msg.forEach((item) => {

                        if (item.checked) {

                            this.changeStyle(item, "yellow", false);
                        }

                    })
                },

                // 删除已完成
                delCompleted() {

                    this.msg = this.msg.filter((item) => item.bool1 === true);

                },

                // 删除所有，不管有没有完成的
                allDel() {
                    this.msg.splice(0);
                }
            },

            // 计算属性
            computed: {

                allChecked: {
                    set(val) {

                        console.log(val);

                        this.msg.forEach((item) => { item.checked = val });
                    },

                    get() {
                        return (this.msg.filter((item) => { return item.checked }).length === this.msg.length);
                    }
                },
            }

        })
    </script>
</body>

</html>
咩有猫腻.
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-i18n 国际化_使用静态分析管理vue-i18n本地化
cuk5340的博客
07-27 952
vue-i18n 国际化 vue-i18n提取 (vue-i18n-extract) vue-i18n-extract is built to work with your Vue.js projects using vue-i18n. When run vue-18n-extract analyses your Vue.js source code for any vue-i18n key us...
Vue-内容分发
weixin_49512993的博客
10-01 283
文章目录Vue-内容分发九、内容分发1、测试内容分发：2、自定义事件3、Vue入门小结 Vue-内容分发 九、内容分发 在Vue.js中我们使用<slot>元素作为承载分发内容的出口，作者称其为插槽，可以应用在组合组件的场景中； 1、测试内容分发： 比如准备制作一个待办事项组件(todo) ， 该组件由待办标题(todo-title) 和待办内容(todo-items)组成(使用slot插槽嵌套组件）： //定义一个列表组件 Vue.component("todo",{
八、【VUE-CLI】待办事项案例（第一版）
天行健，君子以自强不息
08-04 950
待办事项案例，之后会一点点优化这个案例
Vue3实现一个简单的待办事项列表，可以添加和删除事项
最新发布
有我更精彩的博客
06-16 1152
待办事项列表是前端开发中的一个经典案例，通过这个简单的项目，我们不仅能够练习Vue3的基本操作，还能在面试中展示自己的技术实力。最后问候亲爱的朋友们，并邀请你们阅读我的全新著作。
十、【VUE-CLI】组件的自定义事件（待办事项案例 · 第三版）
天行健，君子以自强不息
08-04 217
组件的自定义事件
Vue.js小Demo--todoList待办事项清单
404_Not__Found
11-29 892
通过Vue的基本方法实现一个todoList，功能包括增加事项，删除事项。
十一、【VUE-CLI】全局事件总线（待办事项案例 · 第四版）
天行健，君子以自强不息
08-05 268
全局事件总线
十二、【VUE-CLI】消息订阅与发布（待办事项案例 · 第五版）
天行健，君子以自强不息
08-05 109
消息订阅与发布
前端框架-Vue
AyinMars的博客
03-25 6213
Vue Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios 页面跳转 ： vue-router 状态管理：vuex Vue-UI : ICE , Element UI 1 前端核心分析 1、VUE 概述 Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。 与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库
【Vue】基于vue全家桶的待办事项demo：项目简介
jiangyaoyujian的博客
02-20 1299
基于vue全家桶的代办事项demo：项目简介 项目介绍 基于vue, vuex, vue-router, vuetify, vue CLI3 搭建的一个简单的代办事项清单demo。 使用日历视图更好地管理代办事项。 添加事项时，可以选择事项开始和结束的日期时间，事件将被添加到日历中对应的位置，可视化的日程管理能更好地协助日程安排。也可以选择事项的颜色。 在清单视图中，可以查看全...
基于vue开发的待办事项demo
02-20
基于vue, vuex, vue-router, vuetify, vue CLI3 搭建的一个简单的代办事项清单demo。 使用日历视图更好地管理代办事项。添加事项时，可以选择事项开始和结束的日期时间，事件将被添加到日历中对应的位置，可视化的...
青否云 - 小程序待办事项vue开源系统
12-11
vue-demo 青否云 vue demo 官网 http://cloud.qingful.com 演示 https://qingful.github.io/jquery-demo/index.html 账号：13253522080 密码：mmmmmm 使用 登录青否云 创建应用 数据设置。 创建数据表。 创建数据...
todo-vue-3:使用Vue 3的Todo App
03-14
综上所述，"todo-vue-3"项目是一个使用Vue 3、TypeScript、Vite和SCSS构建的待办事项应用示例。通过这个项目，我们可以学习Vue 3的新特性、Vite的高效开发流程以及SCSS的预处理器优势，提升前端开发技能。
基于vue的待办事项源代码
10-28
这个压缩包"基于vue的待办事项源代码"提供了实现一个简单的待办事项应用的完整源代码。待办事项应用是学习和理解Vue.js核心概念的一个常见实践项目。 在`todo-demo`这个目录下，你可以找到以下组成部分： 1. **...
react---组件生命周期（componentDidMount、shouldComponentUpdate等）---点击按钮小球隐藏显示--demo
DcTbnk的博客
07-30 3713
React组件生命周期 初始化阶段 挂载阶段 更新阶段 当状态或者属性发生改变之后会触发更新阶段的钩子函数 在更新阶段不能修改状态数据 卸载阶段 <title>生命周期</title> <style> .ball { width: 100px; height: 100px; border-radius: 50%; background-color: ora
charles查看电脑发起的所有请求和http请求报文-1
DcTbnk的博客
07-03 3490
http请求报文 常见的请求方式 ​ get ​ post ​ put ​ delete 请求报文 请求行 ​ 请求方式 请求地址 版本号 请求头 ​ cookie,host,origin,Content-Type 请求体 ​ 存储的是发送给服务器的数据 请求头和请求体之间有一个空行，空行的作用是分割请求头和请求体 常见的content-type application/x-www-form-urlencoded url编码 application/json json格式的 multipart..
react---私有路由和权限判断（PrivateRoute + withRouter）
DcTbnk的博客
08-04 2592
me PrivateRoute.jsx 私有路由 import React from "react"; import { Route, Redirect } from "react-router-dom"; function PrivateRoute(props) { const isLogin = localStorage.getItem("token") ? true : false; return isLogin ? ( <Route path={props.p
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值