美文网首页
vue技巧--分别控制循环列表的点击事件

vue技巧--分别控制循环列表的点击事件

作者: 随意_web | 来源:发表于2020-07-01 00:06 被阅读0次

这里是我上线前临时遇到的一个问题,解决方案也不是我提出来的,我是在网上看的一个解决方案,这里相当于是直接照搬过来了。方法有很多种,我只是采用了其中一种我觉得比较简单的,通过index,还有一种是currentTarget

直接上代码

<!-- test.vue -->
<template>
  <ul>
    <li v-for="(data,i) in datas" :key="data.id">
      <span v-if="index === i && ifshow">{{data.name}}<span>
//toggle1和toggle2作用相同,只是toggle2跳过了先关闭再显示的流程
      <button @click="toggle(i)">显示隐藏name</button>
    </li>
  </ul>
</template>
<script>
  export default{
    data(){
      return {
        ifshow: false,
        index: -1,
        datas: [{id:1,name:'1' },{id:2,name:'2'}]
      }
    },
    methods:{
      toggle1(i){
        if (!this.ifshow) {
          this.index = i;
        } else {
          this.index = -1;
        }
        this.ifshow = !this.ifshow;
      },
      toggle2(i){  //使用这个方法,html的判断条件只需要index === i即可
        if (this.index !== i) {
          this.index =i;
        } else {
          this.index = -1;
        }
      }
    }
  }
</script>
<style></style>

欢迎指正,欢迎延申

参考

评论1

相关文章

网友评论

      本文标题:vue技巧--分别控制循环列表的点击事件

      本文链接:https://www.haomeiwen.com/subject/xahqqktx.html