<!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. idea一款颜值很高的theme

    在idea的plugins搜索theme,能看到一款人气值超高的插件,下载使用了确实很漂亮!

  2. thymeleaf : input/select/radio回显

    thymeleaf中不用自己去写checked="checked" selected="selected"这种代码,他自己会选. input <input ...

  3. SQL Server - JOIN

    JOIN

  4. TCP-IP详解笔记5

    TCP-IP详解笔记5 ICMPv4和ICMPv6: Internet控制报文协议 Internet控制报文协议(Internet Control Message Protocol, ICMP)与IP ...

  5. 【easy】168. Excel Sheet Column Title 171. Excel Sheet Column Number

    class Solution { public: string convertToTitle(int n) { ) { return ""; } ) / ) + () % + 'A ...

  6. 【原创】大叔经验分享（16）Context namespace element 'component-scan' and its parser class [org.springframework.context.annotation.ComponentScanBeanDefinitionParser] are only available on JDK 1.5 and higher

    今天尝试运行一个古老的工程,配置好之后编译通过,结果运行时报错: org.springframework.beans.factory.BeanDefinitionStoreException: Une ...

  7. java类型转换小技巧

    mysql 之排序显示行号 select @r := @r+1 as rownum,birth,cardNo from card,(select @r:=0)torder by birth ASC

  8. 利用特性和反射给泛型Model赋值

    为了解决从数据库读取的表字段和自己建的viewModel字段名称不相符的问题 本人小白,初次将特性及反射应用到实例,写的不好的地方还请大家多多包涵 新建一个控制台应用程序命名为ReflectAndAt ...

  9. 一 期末架构1 centos7 简介

    一 centos7 安装 和差异 虚拟机配置好硬件  第一张网卡NAT添加第二张网卡选择LAN区段  安装前修改内核 变更网卡名  net.ifnames=0  biosdevname=0  回车   ...

  10. Python学习笔记四

    一.装饰器 1.知识储备 函数对象 函数可以被引用 函数可以当参数传递 返回值可以是函数 可以当作容器的元素 def func1(): print (666) def func2(): print ( ...