vue.js+todolist的代码使用

这次给大家带来vue.js+todolist的代码使用,vue.js+todolist代码使用的注意事项有哪些,下面就是实战案例,一起来看一下。

案例知识点:

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代码

 

  • {{item.label}}

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 = '' } }}#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;}

登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

vue.js父子组件传参详细介绍

vue.js划分组件详细介绍

原生JS怎么异步请求实现Ajax

以上就是vue.js+todolist的代码使用的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2771954.html

(0)
上一篇 2025年3月8日 13:07:12
下一篇 2025年3月8日 13:07:19

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • JS按钮禁用和启用使用详解

    这次给大家带来JS按钮禁用和启用使用详解,使用JS按钮禁用和启用的注意事项有哪些,下面就是实战案例,一起来看一下。 废话不多说了,直接给大家贴代码了,具体代码如下所述: 按钮启用和禁用function btn1(){ document.ge…

    编程技术 2025年3月8日
    200
  • vue.js常用指令总结归纳

    这次给大家带来vue.js常用指令总结归纳,vue.js常用指令使用的注意事项有哪些,下面就是实战案例,一起来看一下。 Vue.js是当下很火的一个JavaScript MVVM(Model-View-ViewModel)库,它是以数据驱动…

    编程技术 2025年3月8日
    200
  • vue.js搭建图书管理平台的技术解答

    这次给大家带来vue.js搭建图书管理平台的技术解答,vue.js搭建图书管理平台的注意事项有哪些,下面就是实战案例,一起来看一下。 Vue.js是当下很火的一个JavaScript MVVM(Model-View-ViewModel)库,…

    编程技术 2025年3月8日
    200
  • JS中怎样操作代码执行的先后顺序

    这次给大家带来JS中怎样操作代码执行的先后顺序,JS操作代码执行先后顺序的注意事项有哪些,下面就是实战案例,一起来看一下。 一、js—>单线程    严格意义上来说,javascript没有多线程的概念,所有的程序都是单线…

    编程技术 2025年3月8日
    200
  • 解析JS的优先队列与循环队列

    这次给大家带来解析JS的优先队列与循环队列,解析JS优先队列与循环队列的注意事项有哪些,下面就是实战案例,一起来看一下。 优先队列 实现一个优先队列:设置优先级,然后在正确的位置添加元素。 我们这里实现的是最小优先队列,优先级的值小(优先级…

    编程技术 2025年3月8日
    200
  • JS数据结构的双向链表定义

    这次给大家带来JS数据结构的双向链表定义,使用JS数据结构双向链表定义的注意事项有哪些,下面就是实战案例,一起来看一下。 双向链表和普通链表的区别在于,在链表中,一个节点只有链向下一个节点的链接,而在双向链表中,链接是双向的:一个链向下一个…

    编程技术 2025年3月8日
    200
  • Vue2.0+axios实现登陆拦截器(附代码)

    vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐使用axios。前段时间第一次在项目里用到vue,关于登陆问题,这里写一下心得。 首先后端: import org.springframework.web.ser…

    编程技术 2025年3月8日
    200
  • js+css完善网页加载时的用户体验

    这次给大家带来,的注意事项有哪些,下面就是实战案例,一起来看一下。 需要材料: 一张loading动画的gif图片 基本逻辑: 模态框遮罩 + loading.gif动图,默认隐藏模态框页面开始发送Ajax请求数据时,显示模态框请求完成,隐…

    2025年3月8日
    200
  • AngularJS环境搭建步奏详解

    这次给大家带来AngularJS环境搭建步奏详解,AngularJS环境搭建的注意事项有哪些,下面就是实战案例,一起来看一下。 AngularJS是什么? AngularJS是一个开源Web应用程序框架。它最初是由MISKO Hevery和…

    编程技术 2025年3月8日
    200
  • Require调用js使用详解

    这次给大家带来Require调用js使用详解,Require调用js的注意事项有哪些,下面就是实战案例,一起来看一下。 在我最初开始写 JavaScript 函数时,通常是这样的: function fun1() { // some cod…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论