vue实现记事本案例
本文实例为大家分享了vue实现记事本案例的具体代码，供大家参考，具体内容如下
<!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 © 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实现简易记事本功能的具体代码,供大家参考,具体内容如下 预览图: 功能如下: (1)输入任务并按下回车键,可将任务添加至任务列表(不可输入重复任务) (2)点击删除,可删除对应任务 (3)点击清空,所有任务都会被删除 (4)左下角同步显示任务总数 完整代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <
-
Vue记事本实例详解
本文实例为大家分享了Vue实现记事本功能的具体代码,供大家参考,具体内容如下 实例功能点不多,主要难点在于笔记文本对象数组的添加,删除,以及对组件的绑定同步事件. 核心代码 <section id="todoapp"> <!-- 输入框 --> <header class="header"> <h1>记事本</h1> <input v-model="note" autofocus=
-
vue-cli+webpack记事本项目创建
vue-cli+webpack记事本项目使用的是vue-cli2.0里面的项目构建工具webpack 项目的准备工作: 1.了解vue2.0 2.了解一些ES6 3.储备一些webpack知识 参照项目地址:vue2.0构建单页应用最佳实战 我们将会选择使用一些vue周边的库 vue-cli , vue-router , vue-resource , vuex 1.使用vue-cli创建项目 2.使用vue-router实现单页路由 3.用vuex管理我们的数据流 4.使用vue-resourc
-
vue实现记事本小功能
本文实例为大家分享了vue实现记事本小功能的具体代码,供大家参考,具体内容如下 直接上代码: <!DOCTYPE html> <html lang="en"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <meta http-equiv="Content-Type" content=&q
-
vue简易记事本开发详解
本文实例为大家分享了vue实现易记事本的具体代码,供大家参考,具体内容如下 css代码 #todoapp { margin: 0 400px; width: 600px; background-color: gray; text-align: center; } .content { margin:0px 100px; } .todo { margin: 10px; text-align: left; background-color:green; } .btn { float: right;
-
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
前言 首先说明这并不是一个教程贴,而记事本应用是网上早有的案例,对于学习 vuex 非常有帮助.我的目的是探索 vuex 2.0 ,然后使用 vuejs 2.0 + vuex 2.0 重写这个应用,其中最大的问题是使用 vue-cli 构建应用时遇到的问题.通过这些问题深入探索 vue 以及 vuex . 我对于框架的学习一直断断续续,最先接触的是 react,所以有一些先入为主的观念,喜欢 react 更多一点,尤其在应用的构建层面来说.之所以断断续续,是因为自己 JS 基础较弱,刚开始学习的
-
vue实现记事本功能
本文实例为大家分享了vue实现记事本功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>记事本</title> <meta http-equiv="X-UA-Compatible&q
-
Vue实现简易记事本
本文实例为大家分享了Vue实现简易记事本的具体代码,供大家参考,具体内容如下 预览图: 功能如下: (1)输入任务并按下回车键,可将任务添加至任务列表(不可输入重复任务) (2)点击删除,可删除对应任务 (3)点击清空,所有任务都会被删除 (4)左下角同步显示任务总数 完整代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
-
基于vue2.0+vuex+localStorage开发的本地记事本示例
本文采用vue2.0+vuex+localStorage+sass+webpack,实现一个本地存储的记事本.兼容PC端和移动端. 实现效果 功能说明 支持回车添加事件 支持事件状态切换 添加事件 -> 进入未完成列表 未完成 -> 已完成(勾选checkbox) 未完成 -> 已取消(点击取消按钮) 已完成 -> 未完成(取消勾选checkbox) 已取消 -> 未完成(点击恢复按钮) 支持控制台打印所有事件数据 支持筛选事件 支持编辑事件 支持删除事件 支持清空所有事件
-
vue实现记事本案例
本文实例为大家分享了vue实现记事本案例的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=&
-
php实现记事本案例
本文实例为大家分享了php实现记事本的具体代码,供大家参考,具体内容如下 记事本案例 要求:1)页面上有一个文本域(textarea元素),和一个发表按钮 2)用户在文本域中输入内容后,点击发表按钮,会以当天的日期和时间创建一个记事本,并将用户输入的内容保存到记事本中 效果: 代码: <style> textarea{ resize: none; border: 2px solid #000; outline: none; } input{ margin-top: 15p
-
vue实现选项卡案例
本文实例为大家分享了vue实现选项卡案例的具体代码,供大家参考,具体内容如下 实现步骤 实现静态UI效果 用传统的方式实现标签结构和样式 基于数据重构UI效果 将静态的结构和样式重构为基于Vue模板语法的形式 处理事件绑定和js控制逻辑 声明式编程 模板的结构和最终显示的效果基本一致 我们先把每组数据作为对象存储在数组中 list: [{ id: 1, title: 'apple', path: 'images/苹果.jpg' }, {
-
Vue v-model实现案例介绍
目录 1. 概述 2. 使用方法 3. 案例 3.1 用户登录 3.2 todolist 3.3 实现单个复选框 3.4 实现多个复选框 3.5 实现复选框全选 3.6 单选和下拉 4. v-model修饰符 4.1 lazy 4.2 trim 4.3 number 5. 案例 5.1 购物车 5.2 购物车持久化 1. 概述 v-model 是 Vue 提供的一个语法糖,它是 value 值和事件的结合体,它会根据不同的表单项,来选择执行不同的事件.它的作用是,通过和表单元素绑定,实现双向数据
-
Vue路由守卫案例代码
目录 Vue路由守卫 全局路由守卫 全局前置守卫 全局后置守卫 实例代码: 独享守卫 组件内守卫 总结 Vue路由守卫 路由守卫,简单理解来说就是,当用户要进行一些操作时,我需要用户的一些信息或数据或行为,我判断过后,才会同意用户进行操作,说到这里,我想大家心里都或多或少有点理解了吧,官方一点的解释就是进行操作的鉴权,当操作与之条件匹配时,操作成功,当操作与之不匹配时,操作终止,作用就是是对路由进行权限控制. 在Vue中,路由守卫分为三种:全局路由守卫.独享路由守卫以及组件内路由守卫 全局路由守
-
vue实现购物车案例
本文实例为大家分享了vue实现购物车的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-
-
Vue实现计数器案例
本文实例为大家分享了Vue实现计数器展示的具体代码,供大家参考,具体内容如下 效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计数器</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">