vue基于组件实现简单的todolist
把todolist拆分为header、footer、list三个模块
index文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todos</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<section class="todoapp" id="app">
<div>
<my-header
@addrecord="parentAdd"
></my-header>
<section class="main">
<input
class="toggle-all"
type="checkbox"
v-model="all" >
<List
:act="filters"
@rmdata="parentRm"
>
</List>
</section>
<my-footer
v-show="!!arr.length"
:n="num"
:cn="cnum"
></my-footer>
</div>
</section>
<script src="js/vue.min.js"></script>
<script src="component/header.js"></script>
<script src="component/footer.js"></script>
<script src="component/list.js"></script>
<script>
/*
实现的一些功能：
1、输入内容回车添加内容
2、全选功能
3、勾选任意内容进行删除
4、根据hash不同，过滤渲染的数据
*/
new Vue({
el:'#app',
data:{
filters:[],//拿到过滤之后的数据
cunm:'/checked',//值根据hash值而改变，且会影响tab的active状态
arr:[
{
id:0,
city:'多伦多',
checked:true
},
{
id:1,
city:'悉尼',
checked:false
},
{
id:2,
city:'慕尼黑',
checked:false
},
{
id:3,
city:'雅加达',
checked:false
}
]
},
methods:{
//把传过来的数据添加到数组中
parentAdd(data){
this.arr.unshift(data)
},
//利用filter删除（把e.id等于id的过滤掉，留下不等于id的）
parentRm(id){
this.arr = this.arr.filter(e=>e.id!==id)
},
hashFn(){
//当hash改变时候，过滤数据
let H = window.location.hash.split('#')[1];
this.cnum = H;
this.filters = this.arr.filter(e=>{
switch(H){
case '/all':
return e;
break;
case '/unchecked':
return !e.checked;
break;
case '/checked':
return e.checked;
break;
default:
return e;
break
}
});
}
},
computed:{
all:{
get(){
//如果arr的length没有直接返回false
if(!this.arr.length){
return false;
}
//所有checked都是真的，就全部选中
return this.arr.every(e=>e.checked)
},
set(newVal){
//把所有的checked都等于newVal
return this.arr.forEach(e=>{
e.checked = newVal
})
}
},
num(){
//未选中的个数
return this.arr.filter(e=>!e.checked).length;
}
},
//当点击选中的时候，会改变arr的数据，当arr中的数据改变就重新过滤数组
watch:{
arr:{
handler(){
this.hashFn();
},
deep:true
}
},
created(){
let hash = window.location.hash;
//如果没有hash就给他设置
if(!hash){
window.location.hash = '#/all';
}else{
this.hashFn();
}
window.onhashchange = () =>{
this.hashFn();
}
}
});
</script>
</body>
</html>
header.js文件
Vue.component('my-header',{
template:`
<header class="header" >
<h1>todos</h1>
<input
class="new-todo"
placeholder="请输入内容"
@keyup.13="add"
v-model="val"
>
</header>
`,
data(){
return{
val:''
}
},
methods:{
add(){
//添加数据
if(this.val){
this.$emit('addrecord',{
id:+new Date,
city:this.val,
checked:false
})
this.val = ''//把原先输入的内容清空
}
}
}
})
list.js文件
Vue.component('list',{
//li中class是动态的，需要给个val.checked
template:`
<ul class="todo-list">
<li
v-for="(val,key) in act"
:class="{completed:val.checked}"
>
<div class="view">
<input
class="toggle"
type="checkbox"
v-model="val.checked"
>
<label>{{val.city}}</label>
<button class="destroy" @click="rm(val.id)"></button>
</div>
</li>
</ul>
`,
props:['act'],
methods:{
rm(id){
this.$emit('rmdata',id)
}
}
})
footer.js文件
Vue.component('my-footer',{
template:`
<footer class="footer">
<span class="todo-count">
<strong>{{n}}</strong>
<span>条未选中</span>
</span>
<ul class="filters">
<li v-for="(val,key) in btns">
<a
:href="val.hash"
:class="{selected:val.hash.substring(1) == cn}"
>{{val.name}}</a>
</li>
</ul>
</footer>
`,
props:['n','cn'],
data(){
return {
num:'#/all',
btns:[
{
hash:'#/all',
name:'全部'
},
{
hash:'#/unchecked',
name:'未选中'
},
{
hash:'#/checked',
name:'已选中'
},
]
}
}
})
vue基于组件实现简单的todolist的更多相关文章
- vue结合element-ui做简单版todolist
结合element-ui首先需要npm安装element-ui npm i element-ui -S: 然后在入口文件中引入: import ElementUI from 'element-ui'; ...
- 基于 bootstrap 的 vue 分页组件
申手党点这里下载示例 基于 bootstrap 的 vue 分页组件,我想会有那么一部分同学,在使用Vue的时候不使用单文件组件,因为不架设 NodeJS 服务端.那么网上流传的 *.vue 的各种分 ...
- vue入门——组件基础todolist
1. 以下是 todolist 的例子,没有用到组件:下面的3 会通过组件拆分todolist <!DOCTYPE html> <html lang="en"&g ...
- jmGraph：一个基于html5的简单画图组件
jmGraph:一个基于html5的简单画图组件 特性: 代码书写简单易理解 面向对象的代码结构 对图形控件化 样式抽离 模块化:入seajs实现模块化开发 兼容性:暂只推荐支持html5的浏览器:i ...
- 一个基于 easyui, vue 和 maptalks 的简单地图应用
一个基于 easyui, vue 和 maptalks 的简单地图应用 做了一个小应用,结合 easyui , vue 和 maptalks 的简单的地图应用.可以用来画图,什么的. 地址
- vuex的简单例子和vue model组件
好久没用过vuex了,vuex官方示例的计算器counter是用的webpack打包了单文件组件,不方便回顾,今天把代码改成了html引人的方式,方便回顾 <!DOCTYPE html> ...
- Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例
Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 ...
- vue统计组件库和ui框架
UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 UI ...
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
随机推荐
- Angular、React.js 和Node.js到底选谁?
为了工作,程序员选择正确的框架和库来构建应用程序是至关重要的,这也就是为什么Angular和React之间有着太多的争议.Node.js的出现,让这场战争变得更加复杂,虽然有选择权通常是一件很棒的事情 ...
- 利用saltstack批量安装clamav杀毒软件
源码包安装: clamav_source: file.managed: - name: /tmp/clamav-0.99.2.tar.gz - unless: test -f /tmp/clamav- ...
- android Button 属性
Android中button 继承了TextView组件. 可以这么用: final TextView tv = new Button(getApplicationContext()); tv.set ...
- 【AtCoder2134】ZigZag MST（最小生成树）
[AtCoder2134]ZigZag MST(最小生成树) 题面 洛谷 AtCoder 题解 这题就很鬼畜.. 既然每次连边,连出来的边的权值是递增的,所以拿个线段树xjb维护一下就可以做了.那么意 ...
- POJ2411 铺地砖 Mondriaan's Dream
Mondriaan's Dream Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 15962 Accepted: 923 ...
- Apache虚拟主机+AD压力测试
<Directory "/usr/local/awstats/wwwroot"> Options NoneAllowOverride None Order allow, ...
- luogu3674 小清新人渣的本愿 (bitset+莫队)
对于加减,用bitset维护当前每个数有没有 对于乘,暴力枚举约数 然后莫队 复杂度$O(m(\sqrt{n}+\frac{c}{64}))$ #include<bits/stdc++.h> ...
- 我们如何用Go来处理每分钟100万复杂请求的场景
在Malwarebytes我们经历了显著的增长,自从我一年前加入了硅谷的公司,一个主要的职责成了设计架构和开发一些系统来支持一个快速增长的信息安全公司和所有需要的设施来支持一个每天百万用户使用的产品. ...
- java 连接数组
一,使用Apache Commons的ArrayUtils Apache Commons类库有很多,几乎大多数的开源框架都依赖于它,Commons中的工具会节省你大部分时间,它包含一些常用的静态方法和 ...
- QTREE5 - Query on a tree V——LCT
QTREE5 - Query on a tree V 动态点分治和动态边分治用Qtree4的做法即可. LCT: 换根后,求子树最浅的白点深度. 但是也可以不换根.类似平常换根的往上g,往下f的拼凑 ...