Vue for loop rendering, click event

is similar to adding a button at the end of the time. Clicking will make the p content in each li show or hide, similar to toggle, but only each button can be clicked to show the current, and the other buttons can be shown or hidden. You need to see whether the corresponding button is clicked

.
Javascript
Mar.31,2021

you should also maintain an array similar to: 

let isShowArr = [false,false,false];

when you click on one of the li to find his index, and invert the value of the corresponding index in isShowArr

do not quite understand your needs, probably guess that you want to be different from other things, such as the current presentation, other hidden effects?

if so, you need to maintain a curIndex variable to identify who clicked. Each click assigns the current index to the curIndex, template to determine whether curIndex and index are equal. The demo is roughly as follows:
here is an example by switching a 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;
        },
    },
}

just add an attribute currIndex, to data to record the expanded item, then click to change this value in the event, and then add the v-show decision of currInex to the template. If you click on the expanded button, you can not deal with it, or set the currIndex to a negative number. You can do whatever you want. Hey, hey,

what you said upstairs is OK, my implementation is to click a button to show the current p, and then click to hide the current p. The display and hiding of
list elements does not affect each other, that is, multiple ps can be displayed on the page at the same time, and whether it is displayed or not is controlled by the buttons behind it. The exact writing of
depends on what kind of requirement the subject is.

Code:
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}}

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

what the landlord should say is that the demand for folding panels is available in, element UI, and you can write it yourself

.

Previous: Swoole\ Process::__construct (): Swoole creation child process reported an error

Next: Vue-router router-view rendering issu

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu