vue for循环渲染，点击事件

Question

类似于这种在时间的后面加个按钮，点击会让每个li里面的p内容显示或者隐藏，类似toggle这种，但是只能每个按钮点击显示当前，其他的显示或者隐藏，需要看对应按钮是否被点击

Answer 1

你应该也去维护一个数组类似：

let isShowArr = [false,false,false];

当点击其中一个li使找到他的索引，并将isShowArr中的对应索引的值取反就可以了

Answer 2

没太看明白你的需求，大概猜测是想做到 当前和其他不一样，比如当前展示，其他都隐藏的效果？

如果是这样，那么你需要 维护一个curIndex变量，标识点击的是谁，每次点击把当前index赋值给curIndex，模板里通过判断curIndex和index是否相等来达到目的，大概demo如下：
这里通过切换一个className来做例子

// html
<template>
    <ul>
      <li v-for="(item ,index) in list" :key="index" @click="handleClick(index)">
        <span :class="{active: index === curIndex}">{{item}}</span> {{index}}
      </li>
    </ul>
</template>

// js

export default {
    data(){
        return {
            curIndex: 0,
            list: ['a','b','c']
        }
    },
    methods: {
        handleClick(p) {
          this.curIndex = p;
        },
    },
}

Answer 3

只需要给 data 加一个属性 currIndex, 来记录展开的项, 然后点击事件里面变更这个值, 然后模板中加入 currInex 的 v-show 判定就行了, 如果点击的是已展开的按钮,你可以不做处理,或者把 currIndex 设置为负数, 你想怎样就怎样, 嘿嘿

Answer 4

楼上各位说的是可以的，我的这个实现的是点击一个按钮显示当前的p，再点击一下会隐藏当前的p。
列表元素的显示隐藏互不影响，也就是说页面中可以同时显示多个p,是否显示由它自己后面的按钮控制。
具体怎么写要看题主是哪种需求吧。

代码：
css

<style>
    .hideContent{
        display: none;
    }
</style>

template

<div v-for="item in dataList">
            <div>
                <span>时间：{{item.time}}</span>
                <span @click="item.show=!item.show">toggle</span>
            </div>
            <p :class="{hideContent:!item.show}">{{item.text}}</p>
 </div>

js

data() {
                return {
                    dataList: [
                        { text:'我是第一条内容', time:'00001', show: false},
                        { text:'我是第二条内容', time:'00002', show: false},
                        { text:'我是第三条内容', time:'00003', show: false},
                        { text:'我是第四条内容', time:'00004', show: false},
                        { text:'我是第五条内容', time:'00005', show: false},
                    ]
                };
            },

Answer 5

楼主应该说的是折叠面板的这种需求，element UI里有，自己写也可以