<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

	<title>便签</title>

	<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;}

	#app input{width: 200px;}

	#app ul{width: 200px;display: block;margin: 0 auto;line-height: 1.5;padding: 0;list-style: none;text-align: left;margin-top: 10px;}

	#app ul li{background: aliceblue;color: #000;margin: 5px 0;}

	#app .done {background: antiquewhite;color: #999}

	</style>

</head>

<body>

	<div id="app">

	  <h1 v-text="msg"></h1>

	  <input v-model="dosth" @keyup.13="onEnter" maxlength="10" placeholder="下一次做什么？">

	  <ul>

	    <li v-for="i in list" :class="{done:i.is_f}" @click='changeF(i);'>

	      {{i.op}}

	    </li>

	  </ul>

	</div>

</body>

</html>

<script src="http://cdn.jsdelivr.net/vue/1.0.7/vue.min.js"></script>

<script>

	/*localStorage 相关方法*/

	var KEY = 'vue_demo';

	function store_get(){

		return JSON.parse(window.localStorage.getItem(this.KEY) || '[]');

	}

	function store_set(val){

		window.localStorage.setItem(this.KEY,JSON.stringify(val));

	}

</script>

<script>

new Vue({

  el: '#app',

  data: {

      msg: '便签',

      dosth: '',

      list: store_get()

  },

  methods : {

    changeF:function(i){

      i.is_f = !i.is_f;

    },

    onEnter: function (){

      this.list.push({

        'op':this.dosth,

        'is_f':false

      });

      this.dosth = '';

    }

  },

  watch:{

    list:{

      handler: function(val, oldVal){

        store_set(val);

      },

      deep: true

    }

  }

})

</script>

　　

效果图

vuejs 70行代码实现便签功能的更多相关文章

  1. localStorage 便签功能实现

    之前利用localStorage写过手机便签应用,因为蛋疼的换了台三星的屌丝级手机,木 有了测试的工具,没能继续优化维护下去.而在网页上实现便签功能目前来说似乎没有太大 的意义,因为不论是 Firef ...

  2. python实战：用70行代码写了一个山炮计算器！

    python实战训练:用70行代码写了个山炮计算器! 好了...好了...各位因为我是三年级而发牢骚的各位伙伴们,我第一次为大家插播了python的基础实战训练.这个,我是想给,那些python基础一 ...

  3. Python 70行代码实现简单算式计算器

    描述:用户输入一系列算式字符串,程序返回计算结果. 要求:不使用eval.exec函数. 实现思路:找到当前字符串优先级最高的表达式,在算术运算中,()优先级最高,则取出算式最底层的(),再进行加减乘 ...

  4. 如何用70行Java代码实现深度神经网络算法（转）

    对于现在流行的深度学习,保持学习精神是必要的——程序员尤其是架构师永远都要对核心技术和关键算法保持关注和敏感,必要时要动手写一写掌握下来,先不用关心什么时候用到——用不用是政治问题,会不会写是技术问题 ...

  5. 如何用70行Java代码实现深度神经网络算法

    http://www.tuicool.com/articles/MfYjQfV 如何用70行Java代码实现深度神经网络算法 时间 2016-02-18 10:46:17  ITeye 原文  htt ...

  6. HTML5游戏实战之20行代码实现打地鼠

    之前写过一篇打地鼠的博客70行的代码实现打地鼠游戏,细致思考过后,发现70行代码都有点多余了,应用tangide的控件特性,能够将代码量缩减到20行左右. 先show一下终于成果,点击试玩:打地鼠.或 ...

  7. win7和win10自带桌面便签哪里找

    一些小伙伴习惯使用windows自带的便签功能,但win7和win10区别较大, 导致更新系统后不知道在哪里找,甚至以为没有该功能了, 其实不然,下面我总结了2种方法,希望能帮到有需要的人 win7( ...

  8. python——5行代码采集3000+上市公司信息

    毕业季也到了找工作的季节了,很多小伙伴都会一家一家的公司去看,这得多浪费时间啊.今天用Python教大家怎么采集公司的信息,相信大家会很喜欢这个教程的,nice! 基本环境配置 版本:Python3 ...

  9. android widget 开发实例 : 桌面便签程序的实现具体解释和源代码 （上）

    如有错漏请不吝拍砖指正,转载请注明出处,很感谢 桌面便签软件是android上经常使用软件的一种,比方比較早的Sticky Note,就曾很流行, Sticky Note的介绍能够參见 http:// ...

随机推荐

  1. 「luogu2680」[NOIp2015] 运输计划

    题目大意:给定一棵n个节点的树,输入m组一条链的两个端点:把树上的某个边权改为0,求m条链长度的最大值的最小值: 一.考虑二分: 1.对于需要判断是否为可行方案的 mid,所有链长不大于 mid 的链 ...

  2. asyncio协议

    服务端 import asyncio import logging import sys from typing import Optional SERVER_ADDRESS = ('localhos ...

  3. 【原创】大数据基础之Parquet（1）简介

    http://parquet.apache.org 层次结构: file -> row groups -> column chunks -> pages(data/index/dic ...

  4. 什么是内部类？ Static Nested Class 和 Inner Class 的不同。

    什么是内部类? Static Nested Class 和 Inner Class 的不同.        内部类就是在一个类的内部定义的类,内部类中不能定义静态成员(静态成员不是对象的特性,只是为了 ...

  5. 十三python基础之socket编程

      阅读目录 一 客户端/服务器架构 二 osi七层 三 socket层 四 socket是什么 五 套接字发展史及分类 六 套接字工作流程 七 基于TCP的套接字 八 基于UDP的套接字 九 粘包现 ...

  6. 数位dp-入门模板题 hdu2089

    #include<bits/stdc++.h> using namespace std; ][],n,m; void init(){//dp[i][j]:i位的数,最高位是j dp[][] ...

  7. iOS制作自己的Framework框架

    1.新建工程选择iOS —> Cocoa Touch Framework 2.进入工程将工程自带的文件干掉 3.导入自己所需的文件 4.4.TARGETS —> Build Setting ...

  8. css中的宽度

    浏览器通过CSS对元素的盒子模型的描述进行页面渲染的.因此,元素的宽度受到父元素.css描述的影响. 通常,元素的宽度是指盒子模型中content-box所占用的宽度.也就是说,默认box-sizin ...

  9. SpringBoot配置分析、获取到SpringBoot配置文件信息以及几种获取配置文件信息的方式

    Spring入门篇:https://www.cnblogs.com/biehongli/p/10170241.html SpringBoot的默认的配置文件application.properties ...

  10. CoopyIII开发文档之控制LED灯开关

    作者:那年:QQ:843681152 一. CooplyIII环境的搭建 工欲善其事必先利器,如何搭建CooplyIII的开发环境是一切coolpyIII开发的前提.CoolpyIII作者内cool超 ...