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>

  

效果图

 

转载于:https://www.cnblogs.com/lzs-888/p/6340546.html

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值