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;
        },
    },
}