首頁猿問 vue for循環(huán)渲染，點(diǎn)擊事件

vue for循環(huán)渲染，點(diǎn)擊事件

JavaScript

翻翻過去那場雪 2018-08-02 20:56:53

類似于這種在時(shí)間的后面加個(gè)按鈕，點(diǎn)擊會(huì)讓每個(gè)li里面的p內(nèi)容顯示或者隱藏，類似toggle這種，但是只能每個(gè)按鈕點(diǎn)擊顯示當(dāng)前，其他的顯示或者隱藏，需要看對應(yīng)按鈕是否被點(diǎn)擊

查看完整描述

2 回答

明月笑刀無情

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超4個(gè)贊

你應(yīng)該也去維護(hù)一個(gè)數(shù)組類似：

let isShowArr = [false,false,false];

當(dāng)點(diǎn)擊其中一個(gè)li使找到他的索引，并將isShowArr中的對應(yīng)索引的值取反就可以了

反對回復(fù) 2018-08-04

肥皂起泡泡

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超6個(gè)贊

沒太看明白你的需求，大概猜測是想做到當(dāng)前和其他不一樣，比如當(dāng)前展示，其他都隱藏的效果？

如果是這樣，那么你需要維護(hù)一個(gè)curIndex變量，標(biāo)識點(diǎn)擊的是誰，每次點(diǎn)擊把當(dāng)前index賦值給curIndex，模板里通過判斷curIndex和index是否相等來達(dá)到目的，大概demo如下：
這里通過切換一個(gè)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;
        },
    },
}

反對回復(fù) 2018-08-04