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 相关文章推荐
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
Jan 17 Javascript
jquery 页面滚动到底部自动加载插件集合
Jan 31 Javascript
用户代理字符串userAgent可实现的四个识别
Sep 20 Javascript
js阻止浏览器默认行为的简单实例
May 15 Javascript
JS实现物体带缓冲的间歇运动效果示例
Dec 22 Javascript
深入理解js中的加载事件
Feb 08 Javascript
微信小程序实战之自定义toast(6)
Apr 18 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
javascript中floor使用方法总结
Feb 02 Javascript
ES6 Set结构的应用实例分析
Jun 26 Javascript
小程序中英文混合排序问题解决
Aug 02 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 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获取网站域名和地址的代码
2008/08/17 PHP
php权重计算方法代码分享
2014/01/09 PHP
ThinkPHP访问不存在的模块跳转到404页面的方法
2014/06/19 PHP
php操作xml入门之cdata区段
2015/01/23 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
PHP7 错误处理机制修改
2021/03/09 PHP
json 入门基础教程 推荐
2009/10/31 Javascript
javascript从image转换为base64位编码的String
2014/07/29 Javascript
jQuery中nextAll()方法用法实例
2015/01/07 Javascript
JS实现仿百度文库评分功能
2017/01/12 Javascript
js简易版购物车功能
2017/06/17 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
2018/08/19 Javascript
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
js实现视图和数据双向绑定的方法分析
2020/02/05 Javascript
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
Python程序设计入门(3)数组的使用
2014/06/16 Python
python解析xml文件操作实例
2014/10/05 Python
Pthon批量处理将pdb文件生成dssp文件
2015/06/21 Python
Python实现判断字符串中包含某个字符的判断函数示例
2018/01/08 Python
python批量实现Word文件转换为PDF文件
2018/03/15 Python
python 把列表转化为字符串的方法
2018/10/23 Python
人工神经网络算法知识点总结
2019/06/11 Python
python解析xml简单示例
2019/06/21 Python
Python中pass的作用与使用教程
2020/11/13 Python
使用HTML5原生对话框元素并轻松创建模态框组件
2019/03/06 HTML / CSS
莫斯科的韩国化妆品店:Sifo
2019/12/04 全球购物
文秘专业大学生求职信
2013/11/10 职场文书
质量承诺书范文
2014/03/27 职场文书
需求分析说明书
2014/05/09 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
党的群众路线学习笔记
2014/11/06 职场文书
离婚协议书范文2014(夫妻感情破裂)
2014/12/14 职场文书
Python使用protobuf序列化和反序列化的实现
2021/05/19 Python
MySQL的安装与配置详细教程
2021/06/26 MySQL
利用Sharding-Jdbc进行分库分表的操作代码
2022/01/22 Java/Android
hive数据仓库新增字段方法
2022/06/25 数据库