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 相关文章推荐
显示js对象所有属性和方法的函数
Oct 16 Javascript
javascript 哈希表(hashtable)的简单实现
Jan 20 Javascript
浅析Cookie中的Path与domain
Dec 18 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
Jan 13 Javascript
jQuery中clearQueue()方法用法实例
Dec 29 Javascript
JavaScript学习心得之概述
Jan 20 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
微信小程序 wxapp内容组件 progress详细介绍
Oct 31 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
Aug 16 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
May 10 Javascript
React 项目迁移 Webpack Babel7的实现
Sep 12 Javascript
vue 子组件和父组件传值的示例
Sep 11 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删除指定目录中的所有目录及文件的方法
2015/02/26 PHP
php函数重载的替代方法--伪重载详解
2015/05/08 PHP
PHP导入导出Excel代码
2015/07/07 PHP
简单的php+mysql聊天室实现方法(附源码)
2016/01/05 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
javascript 限制输入和粘贴(IE,firefox测试通过)
2008/11/14 Javascript
使用Javascript接收get传递的值的代码
2011/11/30 Javascript
JavaScript中最简洁的编码html字符串的方法
2014/10/11 Javascript
JS获得一个对象的所有属性和方法实例
2017/02/21 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
2018/12/22 jQuery
小程序实现按下录音松开识别语音
2019/11/22 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
JavaScript使用prototype属性实现继承操作示例
2020/05/22 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
[01:15:00]LGD vs Mineski Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
python3.3使用tkinter开发猜数字游戏示例
2014/03/14 Python
virtualenv实现多个版本Python共存
2017/08/21 Python
Python文本处理之按行处理大文件的方法
2018/04/09 Python
Python单元测试简单示例
2018/07/03 Python
深入了解和应用Python 装饰器 @decorator
2019/04/02 Python
python 自定义装饰器实例详解
2019/07/20 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
Python+OpenCV图像处理——实现直线检测
2020/10/23 Python
Python Web项目Cherrypy使用方法镜像
2020/11/05 Python
武汉某公司的C#笔试题面试题
2015/12/25 面试题
社会实践心得体会
2014/01/03 职场文书
水污染治理工程专业自荐信
2014/06/21 职场文书
党的群众路线教育实践活动对照检查材料(个人)
2014/09/24 职场文书
努力学习保证书
2015/02/26 职场文书
介绍信格式样本
2015/05/05 职场文书
运动会宣传稿100字
2015/07/23 职场文书
Python中常见的导入方式总结
2021/05/06 Python
微信小程序实现聊天室功能
2021/06/14 Javascript
常用的Python代码调试工具总结
2021/06/23 Python