vue循环单列表的实现

做任务清单时，是这么想的，有点想做一个类似于滴答清单的效果，但滑动的具体实现不明，所以暂时没有实现还有就是类似于任务清单一开始只显示任务的大概，点击大概后会显示具体的信息。
类似于：

点击后会显示具体的任务

想着应该用v-show绑定一个值来实现下面任务的显示隐藏，但有一个问题，点击后就会进行全部列表的显示

接着想到了两种方法解决，一种是获取对应的dom元素另外一种就是如果每个列表都有自己对应的判断显示的数据就行；
至于第一种暂时没想到解决方法，
第二种的解决方法如下：
在数据库中添加对应的元素，当循环时

<div @click="show(value.show,value.roomid)">{{value.tasks.title}}</div>
          <div class="taskdetails" v-show="value.show">

判断是否为数据库内的字段

//show方法，改变数据库中show的值
show(isshow,roomid){
        let storeshow = isshow        
        isshow = !isshow
        this.$axios({
          method:'post',
          url:"/repairman/show",
          data:{
            lastshow:storeshow,
            show:isshow,
            roomid:roomid
          }
        }).then((res)=>{
          console.log(res)
          this.start()
        })
      },

//star方法进行列表的获取
start(){
        if((this.repid == '')&&(this.dormid == '')){
          alert('请输入工号和楼号')
        }else{
          this.$axios({
          method:'get',
          url:'/getrepdata',
          params:{
            dormid:this.dormid,
            repid:this.repid
          }
          }).then(res=>{
            this.task = res.data
            this.isstart = false
            // console.log(this.task)
          })
        }
      },

//数据库操作,修改show属性
app.post('/repairman/show',(req,res)=>{
    let form = new formidable.IncomingForm()
    form.parse(req,(err,fields,files)=>{
        let lastshow = {
            roomid:fields.roomid,
            show:fields.lastshow
        }
        let show = {
            roomid:fields.roomid,
            show:fields.show
        }
        task.update(lastshow,show).then(result=>{
            res.send('修改成功')
        })
    })
})

//获取对应属性列表
app.get('/getrepdata',(req,res)=>{
    let obj = {
        dormid:req.query.dormid*1, //从前台获取的值不管怎么样都是string类型的，无法与数据库字段对应，所以通过*1实现强制转换为整数类型
        repid:req.query.repid*1 //同理
    }
    task.find(obj).then(arr=>{
        res.send(arr)
    })
})

通过以上方法就能得到想得到的效果