vue-项目试手习惯打卡(2) 渲染打卡删除

渲染打卡

获得本地数据后使用v-for循环去渲染

明示日限

设置明天一次打卡

编写函数获取今天日期

getToday(){
        const date=new Date()
        return date.getFullYear()+'/'+(date.getMonth()+1)+'/'+date.getDate();
      },

在Count函数加入判断

 if(obj.today!==this.getToday()){
          obj.count++
          obj.today=this.getToday()
        }

告诉用户已经打卡

删除

deleteLocalHost(index){
        console.log(index)
        if(confirm('确定删除吗')){
          this.habits.splice(index,1)
          //更新本地存储
          this.setLocalHabits()
        }
      }

总体代码

引用了本地存储的一些图片

<!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" @keyup.enter="addHabits" v-model="title" placeholder="输入打卡习惯">
  </header>
<!--主体-->
    <section>
      <ul class="list">
        <li v-for="(item,index) in habits">
          <span class="icon" v-show="today!==item.today" @click="setCount(item.id)" style="background-image: url('img/calendar.svg')">{{item.title}}</span>
          <span class="icon" v-show="today===item.today" @click="setCount(item.id)" style="background-image: url('img/calendar.svg')">{{item.title}}(已打卡)</span>
          <em><b>{{item.count}}</b> 天 /共坚持 <button class="delete" @click="deleteLocalHost(index)">删除</button></em>
        </li>
      </ul>
    </section>
</div>

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

  const app =new Vue({
    el:'#app',
    data(){
      return {
        title:'',
        habits:[],//习惯列表
        today:this.getToday()
      }
    },
    //实例化后的钩子
    created(){
      this.habits=JSON.parse(localStorage.getItem('habits-0')) || []
      //创建时间对象
      const date=new Date()
    },
    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))
      },
      setCount(id){
          const obj=this.habits.find(obj=>{
            return obj.id===id
          })
        //判断今天日否打卡
        if(obj.today!==this.getToday()){
          obj.count++
          obj.today=this.getToday()
        }
        this.setLocalHabits()
      },
      getToday(){
        const date=new Date()
        return date.getFullYear()+'/'+(date.getMonth()+1)+'/'+date.getDate();
      },
      //删除本地存储数据
      deleteLocalHost(index){
        console.log(index)
        if(confirm('确定删除吗')){
          this.habits.splice(index,1)
          //更新本地存储
          this.setLocalHabits()
        }
      }
    }
  })
</script>
</body>
</html>