<!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. 【转】浅析Java中的final关键字

    谈到final关键字,想必很多人都不陌生,在使用匿名内部类的时候可能会经常用到final关键字.另外,Java中的String类就是一个final类,那么今天我们就来了解final这个关键字的用法. ...

  2. 【原创】大数据基础之ElasticSearch（5）重要配置及调优

    Index Settings 重要索引配置 Index level settings can be set per-index. Settings may be: 1 static 静态索引配置 Th ...

  3. php curl使用

  4. 代码生成工具更新--快速生成Winform框架的界面项目

    在之前版本的代码生成工具Database2Sharp中,由于代码生成都是考虑Winform和Web通用的目的,因此Winform界面或者Web界面都是单独生成的,在工具中生成相应的界面后,复制到项目里 ...

  5. Imcash：坐下来认真和你们说说话

    筹备已久的Imcash终于快上线了,上线后会用作品向你们证明你们的选择是正确的.在准备的半年期间里,团队从调研.设计.市场.人员.技术方面都尽量按照最高要求来配置.从一站式服务平台到现在的资产管家,每 ...

  6. 项目必备！永无 bug 注释

    佛祖保佑 永无bug 代码注释 // // _oo0oo_ // o8888888o // 88" . "88 // (| -_- |) // 0\ = /0 // ___/`-- ...

  7. Linux 上使用LVM 扩展磁盘Size

    第一步:使用 fdisk -l 查看当前磁盘容量 fdisk -l 第二步: 使用 fdisk /dev/sda/ 为free space 添加新的分区 fdisk /dev/sda m :列出所有命 ...

  8. 转载:使用Tornado+Redis维护ADSL拨号服务器代理池

    我们尝试维护过一个免费的代理池,但是代理池效果用过就知道了,毕竟里面有大量免费代理,虽然这些代理是可用的,但是既然我们能刷到这个免费代理,别人也能呀,所以就导致这个代理同时被很多人使用来抓取网站,所以 ...

  9. Beta(3/7)

    鐵鍋燉腯鱻 项目:小鱼记账 团队成员 项目燃尽图 冲刺情况描述 站立式会议照片 各成员情况 团队成员 学号 姓名 git地址 博客地址 031602240 许郁杨 (组长) https://githu ...

  10. [C#] 動的にアセンブリをロードする

    アプリケーション ドメインにおいて起動時に読み込まれない別のアセンブリ (.dll や .exe) を読み込む場合.System.Reflection.Assemby クラスの Load メソッドを使 ...