vue v-for 루프, 클래스 개인 추가

vue v-for 루프, 클래스 개인 추가

v-for를 사용하여 목록을 반복하고 목록을 표시한다.

렌더링 후 각 목록에는 제목과 숨겨진 콘텐츠가 있으며, 그 목록의 제목을 선택하면 모든 콘텐츠가 아닌 콘텐츠가 표시되도록 하고 싶다.

지금까지 이렇게 하고 있다(@hanksd 덕택).

<div class="link">
  <p @click="show = true"> Click here to show the content </p>
  <div v-show="show" class="content">
    <p>This is the hidden content</p>
  </div>
</div>
<div class="link">
  <p @click="show = true"> Click here to show the content </p>
  <div v-show="show" class="content">
    <p>This is the hidden content</p>
  </div>
</div>

data() {
  return {
    show: false,
  };
}

다음과 같은 글을 쓸 수 있다.

<div class="link" v-for="(item, index) in items" :key="index">
  <p @click="show = index"> Click here to show the content </p>
  <div v-show="show === index" class="content">
    <p>This is the hidden content</p>
  </div>
</div>

개체를 반복하는 경우 구문은v-for="(value, key) in items". 또한 지금 선언하는 것이 권장되고 있다.key고리 모양으로

여기서 관련 문서를 읽어 보십시오.

이렇게 하는 방법은 여러 가지가 있는데, 콘텐츠를 나열할 변수를 만들고 있다면, 그게 더 쉬워진다.

<div class="link" v-for="link in links">
  <p @click="link.show = true"> Click here to show the content </p>
  <div v-show="link.show" class="content">
    <p>{{ link.content }}</p>
  </div>
</div>

data() {
  return {
    links: [{
        title: 'the title',
        content: 'the hidden content',
        show: false,
    },{
        title: 'the other title',
        content: 'the other hidden content',
        show: false,
    },]
  };
}

또한 사용자가 두 번째 클릭 시 이 값을 숨기려면 @Leo 응답에 "show ==index ? show = -1 : show = index"를 추가하십시오.

<div class="link" v-for="(item, index) in items" :key="index">
  <p @click="show === index ? show = -1 : show = index"> Click here to show the content </p>
  <div v-show="show === index" class="content">
    <p>This is the hidden content</p>
  </div>
</div>

data() {
  return {
    show: -1,
  };
}

참조URL: https://stackoverflow.com/questions/43729136/vue-v-for-loop-add-class-individual