vue 增删改

添加数据

<div class="header"><input type="text" v-model="title" /><button @click="add">添加</button></div>

 data() {
   return {
      title:""
    }
 },
methods: {
    add(){
      if(this.title == ''){
        alert('不能为空')
        return
      }
      let result = this.list.find((item) => {
        return item.title == this.title
      })
      console.log(result);
      if(result){
            alert('内容已重复，请重新输入')
             this.title="";
            return;
        }
      this.list.push({title:this.title,cid:this.index,timer:new Date()})
      this.title=""
    },
}

删除数据

  methods: {
    del(i){
      this.list.splice(i, 1)
    }
  }

数据双击修改

<li v-for="(item, i) in list" :key="i"  v-show="item.cid==index">
    <input type="text" v-model="item.title" @keydown.enter="edit(item.title)" v-if="editIndex==i">
    <p @dblclick="editIndex = i" v-else>{{ item.title }}</p>
    <span>{{item.timer.toLocaleString()}}</span>
    <button @click="del(i)">删除</button>
</li>

 data() {
   return {
      editIndex:-1,
    }
 }  
methods: {
    edit(val){
        if(val==''){
            alert('内容不能为空')
            return;
        }
        this.list[this.editIndex].title=val;
        this.editIndex=-1;
    }
  },

时间排序

 data() {
   return {
        flag: false
    }
 },
methods: {
    sortTimer(){
          this.flag = !this.flag
          this.list.sort((a,b)=>{
            if (this.flag) {
              return new Date(b.timer).getTime() - new Date(a.timer).getTime()
            }else{
              return new Date(a.timer).getTime() - new Date(b.timer).getTime()
            }
          })
        },
}