Vue 任务清单
<style>
li{ list-style: none; }
#root{
width: 400px;
min-height: 400px;
box-shadow: 0 0 10px #666;
margin: 20px auto;
padding: 20px;
}
.task-input{
width: 100%;
height: 30px;
padding-left: 10px;
font-size: 13px;
border: 1px solid #ccc;
}
.task-count{
padding: 0;
height: 30px;
clear: both;
}
.task-count li:first-of-type{
float: left;
font-size: 14px;
color: red;
}
.task-count .action{
float: right;
padding: 0;
}
.task-count .action a{
font-size: 14px;
text-decoration: none;
color: #888;
display: inline-block;
padding: 2px 8px;
border: 1px solid #fff;
}
.task-count .action .active{
border-color: #888;
}
.tasks{
box-shadow: 0 0 2px #ccc;
padding: 10px;
}
.tasks .todo-list{
padding: 0;
margin: 0;
}
.tasks .todo-list .todo{
height: 40px;
line-height: 40px;
}
.tasks .todo-list .active{
color: #999;
text-decoration: line-through;
}
.tasks .todo-list .destroy{
color: red;
background: #fff;
border: none;
float: right;
margin-top: 12px;
cursor: pointer;
}
.tasks .todo-list .editing .view{
display: none;
}
.tasks .todo-list .editing .edit{
display: block;
}
.tasks .todo-list .edit{
display: none;
width: 80%;
padding: 4px 10px;
}
</style>
<div id="root">
<p>添加任务:</p>
<input
class="task-input"
placeholder="输入任务 回车即可添加任务"
type="text"
v-on:keyup.enter="addTodo"
v-model="todo"
>
<ul class="task-count" v-show="list.length">
<li>{{noCheckedLength}} 个任务未完成 </li>
<li class="action">
<a class="active" href="javascript:;">所有任务</a>
<a href="javascript:;">未完成的任务</a>
<a href="javascript:;">完成的任务</a>
</li>
</ul>
<p>任务列表:</p>
<div class="tasks">
<span v-show="!list.length">还没有添加任何任务</span>
<ul class="todo-list">
<todo-item
class="todo"
:class="{active: item.isChecked, editing: item === edtorTodos}"
v-for="(item, index) in list"
:content="item"
:index="index"
></todo-item>
</ul>
</div>
</div>
<script>
Vue.component('todo-item', {
props: ['content', 'index'],
template: `
<li>
<div class="view">
<input class="toggle" type="checkbox" v-model="content.isChecked">
<label @dblclick="edtorTodo(content)">{{content.title}}</label>
<button class="destroy" @click="deleteTodo(index)">x</button>
</div>
<input
type="text"
class="edit"
v-model="content.title"
@blur="edtorTodoed(content, index)"
@keyup.13="edtorTodoed(content, index)"
@keyup.esc="cancelTodo(content)"
/>
</li>
`,
data () {
return {
}
}
})
new Vue({
el: '#root',
data: {
list: [
{
title: 'xiaobai'
}
],
todo: '',
edtorTodos: '', // 记录编辑的数据
beforeTitle: ''
},
methods: {
// addTodo () {
// if(!this.todo) return;
// this.list.push({
// title: this.todo,
// isChecked: false
// })
// this.todo = '';
// },
// watch: {
// list: {
// }
// },
// deleteTodo (index) { // 删除
// this.list.splice(index, 1)
// },
// edtorTodo (todo) { // 编辑
// this.beforeTitle = todo.title;
// this.edtorTodos = todo;
// },
// edtorTodoed (todo, index) { // 编辑成功
// // 如果输入框为空 则删除列表
// if(!todo.title) this.list.splice(index, 1);
// this.edtorTodos = ''
// },
// cancelTodo (todo) { // 取消编辑
// todo.title = this.beforeTitle;
// this.edtorTodos = ''
// }
},
// directives: { // 自定义组件
// 'focus': {
// update (el, binding){
// if(binding.value){
// el.focus();
// }
// }
// }
// },
computed: {
noCheckedLength () { // 计算未完成任务的数量
return this.list.filter(function(item){
return !item.isChecked
}).length
}
}
})
</script>
Vue 任务清单的更多相关文章
- 5. Vue - 小清单实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- python 全栈开发,Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)
一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...
- vue实现购物清单列表添加删除
vue实现购物清单列表添加删除 一.总结 一句话总结: 基础的v-model操作,以及数组的添加(push)删除(splice)操作 1.checkbox可以绑定数组,也可以直接绑定值? 绑定数组就是 ...
- 任务清单小功能的实现(任务的增、删、改、查、存储)使用Vue实现
文章目录 1.实现的效果(视频演示) 2.重点讲解(编辑的实现) 2.1 提示(官网介绍nextTick的用法) 3.编辑功能的核心代码 4.完整的代码 5.以往练习 任务清单案例(纯Vue) 实现的 ...
- 纯Vue实现网页日常任务清单小功能(数据存储在浏览器)
任务清单可以极大提高我们的工作效率.哪些事情办了.哪些事情代办.哪些是紧急需要办的事情等等. 在组件化编码实战3的基础上进一步改进.将原先的数据保存的浏览器中.就可以做到关闭网页也不会丢失数据的情况 ...
- Vue.js优雅的实现列表清单的操作
一.Vue.js简要说明 Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架.与前端框架Angular一样, Vue.js在设计上采用MVVM模式,当Vie ...
- Vue.js优雅的实现列表清单
一.Vue.js简要说明 Vue.js (读音 /vjuː/) 是一套构建用户界面的渐进式框架.与前端框架Angular一样, Vue.js在设计上采用MVVM模式,当View视图层发生变化时 ...
- 基于vue的购物车清单
<!doctype html> <html> <head> <meta charset="utf-8"> <link rel= ...
- 窥探Vue.js 2.0
title: 窥探Vue.js2.0 date: 2016-09-27 10:22:34 tags: vue category: 技术总结 --- 窥探Vue.js2.0 令人兴奋的Vue.js 2. ...
随机推荐
- Vue与原生APP的相互交互
现在好多APP都采用了Hybrid的开发模式,这种模式特别适合那些内容变动更新较大的APP,从而使得开发和日常维护过程变得集中式.更简短.更经济高效,不需要纯原生频繁发布.但有利肯定有弊咯,性能方面能 ...
- 春节过后就是金三银四求职季,分享几个Java面试妙招,轻松搞定HR!
春节过后就是金三银四,分享几个Java面试妙招,轻松搞定HR! 2020年了,先祝大家新年快乐! 今年IT职位依然相当热门,特别是Java开发岗位.软件开发人才在今年将有大量的就业机会.春节过后,金三 ...
- seleniumChrom无头浏览器
---------------------- 谷歌无头浏览器 ----------------------------- import time from selenium import webdri ...
- docker镜像alpine封装nginx1.16.1【dockerfile】
github地址:https://github.com/laileman/Docker/Dockerfile/alpine-nginx1.16.1 1-目录结构 2- dockerfile内容 3- ...
- vue 项目
项目搭建 1. npm install -g @vue/cli 2.vue -h 3.vue create list-demo 4.yarn serve 运行项目 路由 1.yarn add vue- ...
- F.Three pahs on a tree
思路 两次bfs找出树的直径并处理出端点离树上各叶子节点的距离,在直径上找一点的子树叶子p3,使得dis(p1,p2) + dis(p2,p3) + dis(p1,p3)最大 易知上式是路径实长的两倍 ...
- springboot~工作流activiti的搭建
概念 工作流产品使用activiti的算是比较多了,自带了一套UI界面,可以直接使用,用来设计流程,下面简单总结一下它的步骤: 1 设计模型 2 发布为流程,一个模型可以发布多个版本的流程 3 建立一 ...
- Pascal运行错误表
(A)DOS错误代码 1:错误的功能代码尝试错误的操作系统调用.2:文件未找到程序试图删除.重命名和打开一个不存在的文件.3:目录未发现目录不存在或是错误,也有可能是访问一个不存在的文件.4:打开太多 ...
- int long的数据范围
java 整数型 byte 1字节 -128~127 -2^7~2^7-1 short 2字节 -32768~32767 int 4个字节 -2147483648~2147483647 -2 ...
- 一些PC小软件/工具/神器备份
小巧.有用的工具,提升工作效率. 以下所有软件均在吾爱破解可以找到(善用搜索) everything(本机文件搜索神器) 天若OCR文字识别(强无敌) QQ拼音截屏工具(从QQ拼音/QQ中独立拿出来的 ...