vue里面如何让v-for循环出来的列表里面的列表click事件只对当前列表有效

￡神魔★判官ぃ 2022-01-29 11:07 183阅读 0赞

# [兔子只吃胡萝卜][Link 1] #

# #

随笔 - 94  文章 - 0  评论 - 15

# [vue里面如何让v-for循环出来的列表里面的列表click事件只对当前列表有效][vue_v-for_click] #

![复制代码][copycode.gif]

li点击只让当前的 li 下面的span 隐藏

![复制代码][copycode.gif]

方法一：用vue就尽量遵从数据驱动的想法，实现这个的方法很多，但是尽量不要直接去操作dom。

![复制代码][copycode.gif]

<div id="app">
      <ul>
        <li v-for="list in lists" @click="show($index)">
          <span v-show="$index !== i">{
      { list }}</span>
        </li>
      </ul>
    </div>
    <script>
    new Vue({
      el: '#app',
      data: {
        lists: [1, 1, 1],
        i: -1 
      },
      methods: {
        show (index) {
          this.i = index
        }
      }
    })
    </script>

![复制代码][copycode.gif]

方法2：

<ul id="app">
      <li v-for='item in items' @click="toggle(item)">
        <span v-if='item.show'>{
      {item.content}}</span>
      </li>
    </ul>

![复制代码][copycode.gif]

new Vue({
      el: '#app',
      data: function() {
        return {
          items: [{
            content: '1 item',
            show: true
          }, {
            content: '2 item',
            show: true
          }, {
            content: '3 item',
            show: true
          }]
        }
      },
      methods: {
        toggle: function(item) {
                item.show = !item.show;
        }
      }
    })

![复制代码][copycode.gif]

[Link 1]: https://www.cnblogs.com/tangwanzun/
[vue_v-for_click]: https://www.cnblogs.com/tangwanzun/p/7828317.html
[copycode.gif]: /images/20220129/e341412135f34b5ab30a4c28d5ee1a23.png