<!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. CEYE平台的使用

    0x01 CEYE 是什么 CEYE是一个用来检测带外(Out-of-Band)流量的监控平台,如DNS查询和HTTP请求.它可以帮助安全研究人员在测试漏洞时收集信息(例如SSRF / XXE / R ...

  2. 2018-2019-1 20189208《Linux内核原理与分析》第九周作业

    活动 main函数编译有问题,div 函数和系统中某个函数重名,浮点输出有问题,scanf也有问题 修改如下 scanf_s("%d %d", &a, &b); p ...

  3. Chrome 远程代码执行漏洞CVE-2019-5786-EXP

    0x01 漏洞原理 CVE-2019-5786是位于FileReader中的UAF漏洞,由Google's Threat Analysis Group的Clement Lecigne于2019-02- ...

  4. torch.utils.data.DataLoader()中的pin_memory参数

    参考链接:http://www.voidcn.com/article/p-fsdktdik-bry.html 该pin_memory参数与锁页内存.不锁页内存以及虚拟内存三个概念有关: 锁页内存理解( ...

  5. Saltstack自动化操作记录（2）-配置使用

    之前梳理了Saltstack自动化操作记录(1)-环境部署,下面说说saltstack配置及模块使用: 为了试验效果,再追加一台被控制端minion机器192.168.1.118需要在master控制 ...

  6. python图片转为base64

    # -*- coding: utf-8 -*- import base64 with open("/home/chaowei/1.png","rb") as f ...

  7. liunx系统下调整Swap分区大小

    作者:邓聪聪 添加swap交换空间的步骤如下:第一步:确保系统中有足够的空间来用做swap交换空间,准备在一个独立的文件系统中添加一个swap交换文件,在/tmp中添加1G的swap交换文件第二步:添 ...

  8. lua分割字符串

    str = "abc;123;345" local tab = string.split(str, ";") 然后list里面就是 abc123345 了.第二 ...

  9. [原创]c# 岛2 小辅助~~~ 钓鱼 连击

  10. jquery源码解析日常

    介绍:JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF1.5+, Safari 2.0+, Op ...