Vue入门案例---ToDoList

仿 ToDoList官方

功能展示

1.初始页面

<template>
  <div>
      <!-- 输入框 -->
      <input type="text" @keyup.enter="keyup" v-model.trim="value">

      <!-- 正在进行 -->
      <h2>正在进行({
    
    {
    
     yesSize }})</h2>
      <ul>
          <li v-for="(item,index) in list" v-show="!item.done" :key="index"> 
            <!-- 复选框 -->
            <!-- 取消复选框的默认选中行为 -->
            <input type="checkbox" @click.prevent="changeDone(item)">
            
            <!-- 点击文字修改状态为输入框 -->
            <!-- 当点击的下标和当前下标一致的时候，让输入框显示 -->
            <span @click="changeState(index,item)" v-show="index !== updateIndex">{
    
    {
    
     item.value }}</span>  
            <input type="text" v-model="updateValue" v-show="index === updateIndex" @blur="update">

            <a href="javascript:;" @click="del(index)">删除</a>
        </li>
      </ul>
      <h2>已完成({
    
    {
    
     noSize }})</h2>
      <ul>
          <li v-for="(item,index) in list" v-show="item.done" :key="index"> 
            <!-- 复选框 -->
            <input type="checkbox" @click.prevent="changeDone(item)" checked>

            <!-- 点击文字修改状态为输入框 -->
            <!-- 当点击的下标和当前下标一致的时候，让输入框显示 -->
            <span @click="changeState(index,item)" v-show="index !== updateIndex">{
    
    {
    
     item.value }}</span>  
            <input type="text" v-model="updateValue" v-show="index === updateIndex" @blur="update">

            <a href="javascript:;" @click="del(index)">删除</a>
        </li>
      </ul>
  </div>
</template>

2.在输入框输入内容，按回车，添加到正在进行的列表

//键盘按下事件
        keyup(){
    
    
            //输入框内容不能为空
            if(this.value.trim() == '') return;

            //按下回车，把输入框的值添加到正在进行的事件列表
            this.list.push(
                {
    
    
                    value : this.value,
                    done :false   //默认未完成
                }
            );
            this.value = '';
        },

3.点击文本，变为输入框，可以对内容进行修改

changeState(index,item){
    
    
            // console.log(index);
            // 告诉它要修改的下标
            this.updateIndex = index;
            // 让事件列表的输入框的值为传过来的item值（传过来的item值为上面输入框里面的值）
            this.updateValue = item.value;
        },

4.文本框失焦，输入框隐藏，值变为修改后的值

//失焦事件，当失焦的时候，让输入框隐藏
        update(){
    
    
            //失焦的时候
            // this.list[this.updateIndex]是一个对象
            this.list[this.updateIndex].value = this.updateValue;

            //失焦的时候让点击的下标和当前下标不一致，输入框就隐藏了
            this.updateIndex = -1;
        },

5.点击“x”，删除内容

 //删除
        del(index){
    
    
            //当前状态是修改状态的时候不能删除
            if(this.updateIndex === -1){
    
    
                this.list.splice(index,1);
            }
        },

6.点击正在进行的列表的内容前面的复选框，事件从正在进行的列表添加到已经完成的列表

//复选框，点击复选框，事件从正在进行列表添加到已完成列表
        changeDone(item){
    
    
            //改变v-show的值
            item.done = !item.done;
        },

7.点击已经完成的列表的内容前面的复选框，事件从已经完成的列表添加到正在进行的列表

//复选框，点击复选框，事件从正在进行列表添加到已完成列表
        changeDone(item){
    
    
            //改变v-show的值
            item.done = !item.done;
        },

8计算事件列表的数量

// 计算属性求事件列表的事件数量
    computed :{
    
    
        yesSize(){
    
    
            let array =  this.list.filter(item => {
    
    
                return item.done == false;
            })
            return array.length;
        },
        noSize(){
    
    
            let array =  this.list.filter(item => {
    
    
                return item.done == true;
            })
            return array.length;
        }
    },

9.使用localstorage把事件保存到本地,并监听事件列表的变化

//保存到本地
        save(){
    
    
            localStorage.setItem('toDoList',JSON.stringify(this.list));
        }

// 监听,监听list的改变，只要一改变就保存到本地
    watch : {
    
    
        list : {
    
    
            handler(array){
    
    
                localStorage.setItem('toDoList',JSON.stringify(array));
            },
            deep : true
        }
    },

//生命周期函数
    //初创期，只要一运行就会执行的函数
    created(){
    
    
        let list = localStorage.getItem('toDoList');
        if(list){
    
    
            this.list = JSON.parse(list);
        }
    },

完整代码

<template>
  <div>
      <!-- 输入框 -->
      <input type="text" @keyup.enter="keyup" v-model.trim="value">

      <!-- 正在进行 -->
      <h2>正在进行({
    
    {
    
     yesSize }})</h2>
      <ul>
          <li v-for="(item,index) in list" v-show="!item.done" :key="index"> 
            <!-- 复选框 -->
            <!-- 取消复选框的默认选中行为 -->
            <input type="checkbox" @click.prevent="changeDone(item)">
            
            <!-- 点击文字修改状态为输入框 -->
            <!-- 当点击的下标和当前下标一致的时候，让输入框显示 -->
            <span @click="changeState(index,item)" v-show="index !== updateIndex">{
    
    {
    
     item.value }}</span>  
            <input type="text" v-model="updateValue" v-show="index === updateIndex" @blur="update">

            <a href="javascript:;" @click="del(index)">删除</a>
        </li>
      </ul>
      <h2>已完成({
    
    {
    
     noSize }})</h2>
      <ul>
          <li v-for="(item,index) in list" v-show="item.done" :key="index"> 
            <!-- 复选框 -->
            <input type="checkbox" @click.prevent="changeDone(item)" checked>

            <!-- 点击文字修改状态为输入框 -->
            <!-- 当点击的下标和当前下标一致的时候，让输入框显示 -->
            <span @click="changeState(index,item)" v-show="index !== updateIndex">{
    
    {
    
     item.value }}</span>  
            <input type="text" v-model="updateValue" v-show="index === updateIndex" @blur="update">

            <a href="javascript:;" @click="del(index)">删除</a>
        </li>
      </ul>
  </div>
</template>

<script>
export default {
    
    
    data(){
    
    
        return {
    
    
            // 输入框的值
            value : '', 
            // 数组，存放添加进去的事件列表项 
            list :[],
            //要修改的元素下标
            updateIndex : -1,
            //修改框中的内容
            updateValue : ''
        }
    },
    // 计算属性求事件列表的事件数量
    computed :{
    
    
        yesSize(){
    
    
            let array =  this.list.filter(item => {
    
    
                return item.done == false;
            })
            return array.length;
        },
        noSize(){
    
    
            let array =  this.list.filter(item => {
    
    
                return item.done == true;
            })
            return array.length;
        }
    },
    // 监听,监听list的改变，只要一改变就保存到本地
    watch : {
    
    
        list : {
    
    
            handler(array){
    
    
                localStorage.setItem('toDoList',JSON.stringify(array));
            },
            deep : true
        }
    },
    //生命周期函数
    //初创期，只要一运行就会执行的函数
    created(){
    
    
        let list = localStorage.getItem('toDoList');
        if(list){
    
    
            this.list = JSON.parse(list);
        }
    },
    methods :{
    
    
        //键盘按下事件
        keyup(){
    
    
            //输入框内容不能为空
            if(this.value.trim() == '') return;

            //按下回车，把输入框的值添加到正在进行的事件列表
            this.list.push(
                {
    
    
                    value : this.value,
                    done :false   //默认未完成
                }
            );
            this.value = '';
        },
        //点击元素后修改元素的状态
        changeState(index,item){
    
    
            // console.log(index);
            // 告诉它要修改的下标
            this.updateIndex = index;
            // 让事件列表的输入框的值为传过来的item值（传过来的item值为上面输入框里面的值）
            this.updateValue = item.value;
        },
        //失焦事件，当失焦的时候，让输入框隐藏
        update(){
    
    
            //失焦的时候
            // this.list[this.updateIndex]是一个对象
            this.list[this.updateIndex].value = this.updateValue;

            //失焦的时候让点击的下标和当前下标不一致，输入框就隐藏了
            this.updateIndex = -1;
        },
        //复选框，点击复选框，事件从正在进行列表添加到已完成列表
        changeDone(item){
    
    
            //改变v-show的值
            item.done = !item.done;
        },
        //删除
        del(index){
    
    
            //当前状态是修改状态的时候不能删除
            if(this.updateIndex === -1){
    
    
                this.list.splice(index,1);
            }
        },
        //保存到本地
        save(){
    
    
            localStorage.setItem('toDoList',JSON.stringify(this.list));
        }
        
    }
}
</script>

<style scoped>
    li{
    
    
        margin: 10px 0;
    }
</style>