vuejs 70行代码实现便签功能

Posted 多多明明

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vuejs 70行代码实现便签功能相关的知识，希望对你有一定的参考价值。

<!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行代码实现便签功能的主要内容，如果未能解决你的问题，请参考以下文章

70行代码实现深度神经网络算法

"如何用70行Java代码实现深度神经网络算法" 的delphi版本

《团队-Android手机便签-项目进度》

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

android如何实现便签上的文字划掉功能

70行JavaScript代码实现除夕夜倒计时 零基础也能学会～