分享一个vue实现的记事本功能案例


Posted in Vue.js onApril 11, 2022

直接上代码:

<!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">
    <title>Document</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./css/index.css">
</head>
 
<body>
    <!-- 
    1.用户输入待办事项,回车后添加到“正在进行”,并清空文本框  
    2.在“正在进行”列表中单击列表项,添加到 已完成 列表  
    3.在“已经完成”列表中单击列表项,添加到 正在进行 列表 
    4.在响应列表项中点击 删除  删除 该项目。
   -->
    <div id="app">
        <header>
            <section>
                <label for="title"></label>
                <input type="text" v-model="thing" placeholder="添加ToDo" required="required" autocomplete="off" @keydown.13="add">
            </section>
        </header>
        <section>
            <h2>正在进行<span>{{ongoing.length}}</span></h2>
            <ol id="todolist" class="demo-box">
                <li v-for="(item,index) in ongoing" :key="item.id">
                    <input type="checkbox" @click="addToDone(index)"> {{item.title}}
                    <button @click="delGoing(index)">删除</button>
                </li>
            </ol>
            <h2>已完成<span>{{done.length}}</span></h2>
            <ul id="donelist">
                <li v-for="(item,index) in done" :key="item.id">
                    <input type="checkbox" checked @click="addToGoing(index)"> {{item.title}}
                    <button @click="delDone(index)">删除</button>
                </li>
            </ul>
        </section>
    </div>
    <footer>
        Copyright &copy; 2021 todolist.cn
    </footer>
    <script src="../vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                id: 4,
                //存储用户输入的信息
                thing: "",
                /* 正在进行 列表 */
                ongoing: [{
                    id: 1,
                    title: "吃饭"
                }, {
                    id: 2,
                    title: "睡觉"
                }],
                //已经完成 列表
                done: [{
                    id: 3,
                    title: "打豆豆"
                }]
            },
            methods: {
                //添加到待办事项
                add() {
                    //组装一个对象,将对象添加到ongoing数组中。
                    let obj = {
                        id: this.id,
                        title: this.thing
                    };
                    //新的对象产生,id自增,防止id重复。
                    this.id++;
                    /* 把获取到的值添加到待办事项 */
                    this.ongoing.push(obj);
                    //将thing的值设置为空,则输入框自动清空
                    this.thing = "";
                },
                //添加到已经完成
                addToDone(index) {
                    //将点击的数据 从ongoing 删除,添加到 Done中
                    //splice(index,1)从index开始,删除一个元素。 splice会返回被删除的元素组成的数组。
                    this.done.push(this.ongoing.splice(index, 1)[0])
                },
                /* 添加到正在进行 */
                addToGoing(index) {
                    this.ongoing.push(this.done.splice(index, 1)[0])
                },
                /* 从正在进行中删除 */
                delGoing(index) {
                    this.ongoing.splice(index, 1)
                },
                /* 从已经完成中删除 */
                delDone(index) {
                    this.done.splice(index, 1)
                }
            }
        })
    </script>
</body>
 
</html>

样式部分

body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  background: #CDCDCD;
}
 
header {
  height: 50px;
  background: #333;
  background: rgba(47, 47, 47, 0.98);
}
 
section {
  margin: 0 auto;
}
 
label {
  float: left;
  width: 100px;
  line-height: 50px;
  color: #DDD;
  font-size: 24px;
  cursor: pointer;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
 
header input {
  float: right;
  width: 60%;
  height: 24px;
  margin-top: 12px;
  text-indent: 10px;
  border-radius: 5px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset;
  border: none
}
 
input:focus {
  outline-width: 0
}
 
h2 {
  position: relative;
}
 
span {
  position: absolute;
  top: 2px;
  right: 5px;
  display: inline-block;
  padding: 0 5px;
  height: 20px;
  border-radius: 20px;
  background: #E6E6FA;
  line-height: 22px;
  text-align: center;
  color: #666;
  font-size: 14px;
}
 
ol,
ul {
  padding: 0;
  list-style: none;
}
 
li input {
  position: absolute;
  top: 2px;
  left: 10px;
  width: 22px;
  height: 22px;
  cursor: pointer;
}
 
p {
  margin: 0;
}
 
li p input {
  top: 3px;
  left: 40px;
  width: 70%;
  height: 20px;
  line-height: 14px;
  text-indent: 5px;
  font-size: 14px;
}
 
li {
  height: 32px;
  line-height: 32px;
  background: #fff;
  position: relative;
  margin-bottom: 10px;
  padding: 0 45px;
  border-radius: 3px;
  border-left: 5px solid #629A9C;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}
 
ol li {
  cursor: move;
}
 
ul li {
  border-left: 5px solid #999;
  opacity: 0.5;
}
 
li a {
  position: absolute;
  top: 2px;
  right: 5px;
  display: inline-block;
  width: 14px;
  height: 12px;
  border-radius: 14px;
  border: 6px double #FFF;
  background: #CCC;
  line-height: 14px;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
}
 
li button{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
 
footer {
  color: #666;
  font-size: 14px;
  text-align: center;
}
 
@media screen and (max-device-width: 620px) {
  section {
     width: 96%;
     padding: 0 2%;
  }
}
 
@media screen and (min-width: 620px) {
  section {
     width: 600px;
     padding: 0 10px;
  }
}

分享一个vue实现的记事本功能案例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
vue中如何自定义右键菜单详解
Dec 08 Vue.js
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
教你部署vue项目到docker
Apr 05 Vue.js
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
vue实现Toast组件轻提示
Apr 10 Vue.js
vue打包时去掉所有的console.log
Apr 10 Vue.js
Vue OpenLayer测距功能的实现
Apr 20 Vue.js
vue代码分块和懒加载非必要资源文件
Apr 11 #Vue.js
vue打包时去掉所有的console.log
三种方式清除vue路由跳转router-link的历史记录
Apr 10 #Vue.js
vue route新窗口跳转页面并且携带与接收参数
Apr 10 #Vue.js
vue实力踩坑之push当前页无效
Apr 10 #Vue.js
vue实现Toast组件轻提示
Apr 10 #Vue.js
vue自定义右键菜单之全局实现
Apr 09 #Vue.js
You might like
php urlencode()与urldecode()函数字符编码原理详解
2011/12/06 PHP
php截取后台登陆密码的代码
2012/05/05 PHP
php使用pdo连接报错Connection failed SQLSTATE的解决方法
2014/12/15 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
javascript JSON操作入门实例
2010/04/16 Javascript
jquery监听div内容的变化具体实现思路
2013/11/04 Javascript
javascript中的if语句使用介绍
2013/11/20 Javascript
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
2014/05/27 Javascript
JavaScript函数定义的常见注意事项小结
2014/09/16 Javascript
JavaScript实现查找字符串中第一个不重复的字符
2014/12/29 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
2015/03/04 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
2015/06/19 Javascript
全面了解JavaScript对象进阶
2016/07/19 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
JS 实现计算器详解及实例代码(一)
2017/01/08 Javascript
node跨域转发 express+http-proxy-middleware的使用
2018/05/31 Javascript
webpack开发环境和生产环境的深入理解
2018/11/08 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
2018/12/13 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
2019/11/15 Javascript
js实现网页随机验证码
2020/10/19 Javascript
wxPython之解决闪烁的问题
2018/01/15 Python
python实现朴素贝叶斯算法
2018/11/19 Python
Django ImageFiled上传照片并显示的方法
2019/07/28 Python
Python中断多重循环的思路总结
2019/10/04 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
解决Python发送Http请求时,中文乱码的问题
2020/04/30 Python
浅谈matplotlib 绘制梯度下降求解过程
2020/07/12 Python
python time.strptime格式化实例详解
2021/02/03 Python
萌新HTML5 入门指南(二)
2020/11/09 HTML / CSS
提供世界各地便宜的机票:Sky-tours
2016/07/21 全球购物
如何防止同一个帐户被多人同时登录
2013/08/01 面试题
幼儿园小班家长寄语
2014/04/02 职场文书
贷款担保书范文
2014/05/13 职场文书
《和时间赛跑》读后感3篇
2019/12/16 职场文书
Matlab求解数组中的最大值及它所在的具体位置
2021/04/16 Python