<!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. 怎样给手机安装fiddler证书

    如果需要抓取手机端的HTTPS包,就要在手机上面安装fiddler证书. 1.使用手机连接WiFi做好代理: 2.代理成功后打开手机浏览器: 3.在浏览器输入:http://IP地址:端口号后搜索(如 ...

  2. Script error.解决方法

    1. 添加 crossorigin="anonymous" 到script标签 <script src="https://xxx.com/xxx.js" ...

  3. 《剑指offer》数组中出现一半次数的数字

    本题来自<剑指offer> 反转链表 题目: 思路: C++ Code: Python Code: 总结:

  4. Common Vulnerability Scoring System CVSS

    1.Generating a Shell payload using msfvenom 2.web intrusion Test in fact in the websecurity ,the web ...

  5. C语言判断水仙花数

    水仙花数 水仙花数(Narcissistic number)也被称为超完全数字不变数(pluperfect digital invariant, PPDI).自恋数.自幂数.阿姆斯壮数或阿姆斯特朗数( ...

  6. 最新版 IntelliJ IDEA2018.3.x 破解教程

    https://www.cnblogs.com/Candies/p/10050831.html

  7. Java Spring Boot VS .NetCore （三）Ioc容器处理

    Java Spring Boot VS .NetCore (一)来一个简单的 Hello World Java Spring Boot VS .NetCore (二)实现一个过滤器Filter Jav ...

  8. Java Web环境搭建

    ——————————JavaWeb环境搭建 先下载JDK, Tomcat 7.0 安装JDK后,配置环境变量,此处可参考博客: https://www.cnblogs.com/smyhvae/p/37 ...

  9. C#批量裁剪图片

    有一批图片是全屏拷贝下来的,只需要保留指定区域的图片,用代码实现如下: Bitmap srcBmp = new Bitmap(fi.FullName); Bitmap dstBmp = srcBmp. ...

  10. Grafana和influxdb监控nginx日志中的请求响应时间图形化监控

    监控效果如图: 监控方法: 通过logstash过滤nginx日志,然后解析出nginx日志中的request time字段 然后output到influxdb时序数据库中 通过grafana展示数据 ...