其他分享
首页 > 其他分享> > vue-项目试手 习惯打卡(1)

vue-项目试手 习惯打卡(1)

作者：互联网

大体界面搭建

代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>习惯打卡</title>
  <style>
      h3{
        color: #666;
        text-indent: 2px;
      }
      .input{
        width: 20%;
        border-radius: 4px;
        height: 35px;
        border: 0px;
        background-color: #eee;
        padding: 2px 5px;
        color: #666;
      }
      .list{
        list-style-type: none;
        margin: 10px 0;
        padding: 0px;
      }
      .list li{
        width: 20%;
        padding: 8px 5px;
        height: 30px;
        line-height: 30px;
        border-bottom: 1px solid #ccc;
        font-size: 14px;
        color: #666;
        user-select: none;
      }
      .list li span.icon{
        background-repeat: no-repeat;
        display: inline-block;
        background-position: left center;
        text-indent: 32px;
        cursor: pointer;
      }
      .list li:hover{
        background-color: #eee;
      }
      .list li:hover .delete{
        display: inline-block;
      }
      .list li em{
        float: right;
        padding-right: 5px;
        font-style: normal;
      }
      .list li .delete{
        border: 0;
        background-color: transparent;
        background-image: url("img/删除.svg");
        background-repeat: no-repeat;
        text-indent: -9999px;
        cursor: pointer;
        width: 20px;
        display: none;
      }
      .total{
        color: #666;
      }
  </style>
</head>
<body>

<div id="app">
<!--头部-->
  <header>
    <h3>习惯打卡</h3>
    <input type="text" class="input" placeholder="输入打卡习惯">
  </header>
<!--主体-->
    <section>
      <ul class="list">
        <li>
          <span class="icon" style="background-image: url('img/calendar.svg')">测试打卡</span>
          <em><b>10</b> 天 /共坚持 <button class="delete">删除</button></em>
        </li>
        <li>
          <span class="icon" style="background-image: url('img/calendar.svg')">测试打卡</span>
          <em></em>
        </li>
        <li>
          <span class="icon" style="background-image: url('img/calendar.svg')">测试打卡</span>
          <em></em>
        </li>
      </ul>
      <p class="total">共有习惯:10个 最大坚持:30天</p>
    </section>
</div>

<script src="../js/vue.js"></script>
<script>

  const app =new Vue({
    el:'#app',

  })
</script>
</body>
</html>

效果:

添加本地存储效果



具体代码:

methods:{
      //添加习惯
      addHabits(){
        //时间戳
        const time=Date.now()
        const habit={
          id:time,
          url:'url(\'img/calendar.svg\')',
          title:this.title,
          //打卡统计
          count:0,
          //写入今天日期
          today:''
        }
        this.habits.unshift(habit)
        //数据存储到本地
        this.setLocalHabits()
        //清空输入框
        this.title=''
      },
      setLocalHabits(){
          localStorage.setItem('habits-0',JSON.stringify(this.habits))
      }
    }
  }

标签：vue,试手,color,666,list,li,background,打卡
来源： https://www.cnblogs.com/OfflineBoy/p/15090586.html