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 相关文章推荐
Javascript实现返回上一页面并刷新的小例子
Dec 11 Javascript
JavaScript将取代AppleScript?
Sep 18 Javascript
jQuery构造函数init参数分析
May 13 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
Jul 17 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
Oct 12 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
Jan 26 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
May 09 Javascript
vue子父组件通信的实现代码
Jul 09 Javascript
js学习总结_选项卡封装(实例讲解)
Jul 13 Javascript
浅析Vue 和微信小程序的区别、比较
Aug 03 Javascript
JS常用排序方法实例代码解析
Mar 03 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
Oct 22 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
广播爱好者需要了解的天线知识
2021/03/01 无线电
PHP 时间转换Unix时间戳代码
2010/01/22 PHP
关于php mvc开发模式的感想
2011/06/28 PHP
下拉列表多级联动dropDownList示例代码
2013/06/27 PHP
PHP系统命令函数使用分析
2013/07/05 PHP
Yii框架结合sphinx,Ajax实现搜索分页功能示例
2016/10/18 PHP
laravel创建类似ThinPHP中functions.php的全局函数
2016/11/26 PHP
php设计模式之抽象工厂模式分析【星际争霸游戏案例】
2020/01/23 PHP
单击浏览器右上角的X关闭窗口弹出提示的小例子
2013/06/12 Javascript
JavaScript判断密码强度(自写代码)
2013/09/06 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
2015/09/04 Javascript
基于JavaScript实现淘宝商品广告效果
2017/08/10 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
2020/08/07 Javascript
[05:48]DOTA2英雄梦之声vol21 屠夫
2014/06/20 DOTA
[01:01:13]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第三场
2018/04/06 DOTA
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
详解Python异常处理中的Finally else的功能
2017/12/29 Python
python实现彩票系统
2020/06/28 Python
python实现扫描ip地址的小程序
2019/04/16 Python
用python打印1~20的整数实例讲解
2019/07/01 Python
Python符号计算之实现函数极限的方法
2019/07/15 Python
python实现布隆过滤器及原理解析
2019/12/08 Python
Python BeautifulReport可视化报告代码实例
2020/04/13 Python
自动化专业毕业生自荐信
2013/11/01 职场文书
中国央视网签名寄语
2014/01/18 职场文书
《雨霖铃》听课反思
2014/02/13 职场文书
管理学院毕业生自荐信范文
2014/03/10 职场文书
竞选生活委员演讲稿
2014/04/28 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
2014年幼儿园重阳节活动方案
2014/09/16 职场文书
全国爱眼日活动总结
2015/02/27 职场文书
2015年六一儿童节活动方案
2015/05/05 职场文书
正确的理解和使用Django信号(Signals)
2021/04/14 Python