todolist代码

最新推荐文章于 2022-11-09 09:53:31 发布

村级布兰登

最新推荐文章于 2022-11-09 09:53:31 发布

阅读量319

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/qdhwh/article/details/109503574

版权

初学者
自己写的，不是完美版本

<template>
  <div>
    <div>
      <input type="text" v-model.trim="value" @keydown.enter="add">
    </div>
    <h2>正在进行：{{no}}</h2>
    <ul>
      <li v-for="(item,index) in list" :key="index" v-show="!item.done">
        <input type="checkbox" @click.prevent="changeDone(item)">
        <span v-show="index != updatIndex" @click="changeState(item,index)">{{item.value}}</span>
        <input v-show="index == updatIndex" v-model="updateValue" @blur="update">
        &nbsp;&nbsp;
        <a href="javascript:;" @click="del(index)">删除</a>
      </li>
    </ul>
    <h2>已完成：{{yes}}</h2>
    <ul>
      <li v-for="(item,index) in list" :key="index" v-show="item.done">
        <input type="checkbox" checked="checked" @click.prevent="changeDone(item)">
        <span v-show="index != updatIndex" @click="changeState(item,index)">{{item.value}}</span>
        <input v-show="index == updatIndex" v-model="updateValue" @blur="update">
        &nbsp;&nbsp;
        <a href="javascript:;" @click="del(index)">删除</a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '', //输入的新内容
      updateValue: '', //修改框中的内容
      list: [], //数据
      updatIndex: -1 //要修改的元素下标
    }
  },
  created(){ //生命周期钩子，组件初始化时期执行
    let list = localStorage.getItem('todoList')
    if(list){
      this.list = JSON.parse(list)
    }
  },
  watch:{ //监听list改变
    list: {
      //保存到本地
      handler(arry){
        localStorage.setItem("todoList",JSON.stringify(arry))
      },
      deep:true
    }
  },
  computed: {
    yes(){
      let arry = this.list.filter(item=>{
        return item.done == true
      })
      return arry.length
    },
    no(){
      let arry = this.list.filter(item=>{
        return item.done == false
      })
      return arry.length
    }
  },
  methods: {
    add(){ // 添加
      //非空判断
      if(this.value.trim() == '') return
      this.list.push({
        value: this.value,
        done: false //默认为未完成
      })
      this.value = '' 
    },
    changeState(item,index){ //点击元素后，修改展示的状态
      this.updatIndex = index
      this.updateValue = item.value
    },
    update(){ //执行修改
      this.list[this.updatIndex].value = this.updateValue
      this.updatIndex = -1
      this.updateValue = ''
    },
    changeDone(item){ //修改当前元素的完成状态
      item.done = !item.done
    },
    del(index){//删除
      if(this.updatIndex == -1){
        this.list.splice(index,1)
      }
    },
  },
}
</script>
<style scoped>
  li{
    margin: 10px 0px;
  }
</style>