vue for循环渲染，点击事件

Question

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

Answer 1

你应该也去维护一个数组类似：let isShowArr = [false,false,false];当点击其中一个li使找到他的索引，并将isShowArr中的对应索引的值取反就可以了

Answer 2

没太看明白你的需求，大概猜测是想做到 当前和其他不一样，比如当前展示，其他都隐藏的效果？如果是这样，那么你需要 维护一个curIndex变量，标识点击的是谁，每次点击把当前index赋值给curIndex，模板里通过判断curIndex和index是否相等来达到目的，大概demo如下：这里通过切换一个className来做例子//&nbsp;html<template> &nbsp;&nbsp;&nbsp;&nbsp;<ul> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;v-for="(item&nbsp;,index)&nbsp;in&nbsp;list"&nbsp;:key="index"&nbsp;@click="handleClick(index)"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span&nbsp;:class="{active:&nbsp;index&nbsp;===&nbsp;curIndex}">{{item}}</span>&nbsp;{{index}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li> &nbsp;&nbsp;&nbsp;&nbsp;</ul></template>// jsexport&nbsp;default&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;data(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;curIndex:&nbsp;0, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;list:&nbsp;['a','b','c'] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;methods:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handleClick(p)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.curIndex&nbsp;=&nbsp;p; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;}, }