vue简单案例--Todolist

水深无声 2023-07-18 02:59 36阅读 0赞

> 感觉自己的vue快要忘光了，正好之前的vue博客拉下了，这次一并补上。这次带来的是vue的最基础案例，todolist，用到了缓存，模块化封装，和一些基本的vue语法。

![20200323212052910.gif][]

> 看了上面的gif图，是不是就大概能理解要做什么，实现什么功能了呢？接下来看一看具体的代码：

<template>
      <div id="app">
        <div>
          <h2>tolist</h2>
          <input type="text" placeholder="请输入" @keydown="giveThing">
        </div>
          <p>未完成事项</p>
          
          <ul>
            <li v-if="item.isck==false" v-for="(item,index) in lists" :key="index">
              <input @click="Isdone(index)" type="checkbox" :checked='item.isck'>{
       {item.title}}<button @click="dellist(index)">x</button>
            </li>
          </ul>
          <p>已完成事项</p>
          <ul>
            <li v-if="item.isck==true" v-for="(item,index) in lists" :key="index">
              <input @click="Isdone(index)" type="checkbox" :checked='item.isck'>{
       {item.title}}<button @click="dellist(index)">x</button>
            </li>
          </ul>
        <div>
        </div>
      </div>
    </template>
    
    <script>
    // 导入缓存模块  下一节代码有介绍到
    import Storage from './Public/Storage';
    export default {
      name:'app',
      data(){
        return{
          // lists为整个数据  isck为是否完成
          lists:[
            {
              title:"javascript",
              isck:false
            },
            {
              title:"java",
              isck:false
            },
            {
              title:"html",
              isck:true
            }
          ]
        }
      },
      mounted(){
        this.lists=Storage.getStorage('todo')
      },
      methods:{
        giveThing(e){
          // 写入未完成方法
          if(e.keyCode==13){
            let value=e.target.value;
            if(value!=''){
              this.lists.push({
                title:value,
                isck:false
              });
            }
            e.target.value='';
            Storage.saveStorage('todo',this.lists);
          }
        },
        Isdone(key){
          // 确实是否完成方法
          let ckvalue=this.lists[key].isck;
          this.lists[key].isck=!ckvalue;
          Storage.saveStorage('todo',this.lists);
    
        },
        dellist(index){
          // 删除方法
          this.lists.splice(index,1); 
          Storage.saveStorage('todo',this.lists);
    
        },
      }
    }
    </script>
    
    <style>
      #app{
        width: 500px;
        min-height: 300px;
        margin: 0 auto;
        border: 1px solid black;
      }
    </style>

缓存模块代码

[20200323212052910.gif]: /images/20230528/5ad03a4c3f5a43e6b0bb2c6e8e7ce855.png