vue.js todolist实现代码


Posted in Javascript onOctober 29, 2017

案例知识点:

1.vue.js基础知识

2.HTML5 本地存储localstorage

store.js代码

const STORAGE_KEY = 'todos-vue.js'
export default{
 fetch(){
  return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')
 },
 save(items){
  window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items));
 }
}

App.vue代码

<template>
 <div id="app">
 <h1 v-text="title"></h1>
 <input v-model="newItem" v-on:keyup.enter="addNew"/>
 <ul>
  <li v-for="item in items" v-bind:class="{finished:item.isFinished}" v-on:click='toogleFinish(item)'>
  {{item.label}}
  </li>
 </ul>
 </div>
</template>
<script>
import Store from './store'
export default {
 name: 'app',
 data () {
 return {
  title: 'this is a todo list',
  items:Store.fetch(),
  newItem:''
 }
 },
 watch:{
  items:{
  handler(items){  //经过变化的数组会作为第一个参数传入
   Store.save(items)
   console.log(Store.fetch());
  },
  deep:true  //深度复制
  }
 },
 methods:{
 toogleFinish(item){
  item.isFinished = !item.isFinished
 },
 addNew(){
  this.items.push({
  label:this.newItem,
  isFinished:false,
  })
  this.newItem = ''
 }
 }
}
</script>
<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
.finished{
 text-decoration: underline;
}
</style>

vue.js todolist实现代码

总结

以上所述是小编给大家介绍的vue.js todolist实现代码,希望对的大家有所帮助!

Javascript 相关文章推荐
CCPry JS类库 代码
Oct 30 Javascript
js页面跳转常用的几种方式
Nov 25 Javascript
js中widow.open()方法使用详解
Jul 30 Javascript
JavaScript解析URL参数示例代码
Aug 12 Javascript
干货分享:让你分分钟学会javascript闭包
Dec 25 Javascript
BOM系列第二篇之定时器requestAnimationFrame
Aug 17 Javascript
两种简单的跨域方法(jsonp、php)
Jan 02 Javascript
js判断传入时间和当前时间大小实例(超简单)
Jan 11 Javascript
浅谈layer弹出层按钮颜色修改方法
Sep 11 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
Mar 11 Javascript
小程序开发之模态框组件封装
Apr 23 Javascript
一文帮你理解PReact10.5.13源码
Apr 03 Javascript
javascript按钮禁用和启用的效果实例代码
Oct 29 #Javascript
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 #jQuery
bootstrap table sum总数量统计实现方法
Oct 29 #Javascript
vue.js语法及常用指令
Oct 29 #Javascript
基于vue.js快速搭建图书管理平台
Oct 29 #Javascript
JavaScript代码执行的先后顺序问题
Oct 29 #Javascript
springmvc接收jquery提交的数组数据代码分享
Oct 28 #jQuery
You might like
编写自己的php扩展函数
2006/10/09 PHP
详解PHP+AJAX无刷新分页实现方法
2015/11/03 PHP
php注册审核重点解析(数据访问)
2017/05/23 PHP
ThinkPHP5.0多个文件上传后找不到临时文件的修改方法
2018/07/30 PHP
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
超简单的jquery的AJAX用法
2010/05/10 Javascript
最简单的js图片切换效果实现代码
2011/09/24 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
2011/10/18 Javascript
jquery中使用ajax获取远程页面信息
2011/11/13 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
2012/12/27 Javascript
基于JavaScript 声明全局变量的三种方式详解
2013/05/07 Javascript
解决jquery中美元符号命名冲突问题
2014/01/08 Javascript
用js替换除数字与逗号以外的所有字符的代码
2014/06/07 Javascript
js图片模糊切换显示特效的方法
2015/02/17 Javascript
jquery实现多屏多图焦点图切换特效的方法
2015/05/04 Javascript
Javascript基础_简单比较undefined和null 值
2016/06/14 Javascript
EasyUI 结合JS导出Excel文件的实现方法
2016/11/10 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
2017/01/25 Javascript
微信小程序仿朋友圈发布动态功能
2018/07/15 Javascript
一些你可能不熟悉的JS知识点总结
2019/03/15 Javascript
vue指令做滚动加载和监听等
2019/05/26 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
2019/09/11 Javascript
[02:12]DOTA2英雄基础教程 变体精灵
2013/12/16 DOTA
Python类的基础入门知识
2008/11/24 Python
python中的多线程实例教程
2014/08/27 Python
Python文本处理之按行处理大文件的方法
2018/04/09 Python
将python代码和注释分离的方法
2018/04/21 Python
python实现扫雷小游戏
2020/04/24 Python
深入解析HTML5使用SVG图像时的viewBox属性用法
2015/09/02 HTML / CSS
网络方面基础面试题
2012/11/16 面试题
大学生最新职业生涯规划书范文
2014/01/12 职场文书
一年级班主任寄语
2014/01/19 职场文书
婚前协议书怎么写
2014/04/15 职场文书
安全生产一岗双责责任书
2014/07/28 职场文书
安全教育的主题班会
2015/08/13 职场文书
2019通用版新员工入职培训方案!
2019/07/11 职场文书