제가 이 기사를 쓴 계기가 되고 싶어요.

지난달.js를 사용하여 웹 응용 프로그램을 사용할 기회가 있습니다.
대상의 데이터를 v-if로 표시할지 v-show로 표시할지 고민하면서 실시하고 있습니다.
실장 과정에서 나는 차이를 명확하게 알 수 있는 모델을 발견한 코드를 발견했기 때문에 의사록을 포함하는 의미를 보도에 총괄하고 싶다

기본 코드

HelloWorld.vue

<template>
  <div class="hello">
    <div v-for="box in boxs" :key="box.name" :style="[setSize(box)]">
      {{ box.name }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      boxs: [
        {name: 'box1', width: 100, height: 50, color: 'red'},
        {name: 'box2', width: 100, height: 100, color: 'blue'},
        {name: 'box3', width: 100, height: 150, color: 'green'}
      ]
    }
  },
  methods: {
    setSize (box) {
      console.log('methods in')
      const height = box.width + box.height
      return {
        width: box.width + '%',
        height: height + 'px',
        backgroundColor: box.color
      }
    }
  }
}
</script>

boxs 대상을 배치하고 설정한name
스타일은 Height만 정의하는 width와 Height만 추가하는 걸 설정했어요.
또한 접근 방법 내console.log 출력 로그에 들어갔는지 확인하기 위해
화면은 다음과 같습니다.

저널

박스가 3개 있으니까. 3回ログが表示される
여기서 boxs의 스타일 요소를 지우고 어떻게 표시하는지 확인합니다.>

v-if 사용 시

v-if에서 박스 내의 하이라이트는 경우에만 표시되도록 변경하고 박스 2의 하이라이트를 제거하려고 시도합니다

<template>
  <div class="hello">
    <div v-for="box in boxs" :key="box.name" :style="[setSize(box)]" v-if="box.height">
      {{ box.name }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      boxs: [
        {name: 'box1', width: 100, height: 50, color: 'red'},
        {name: 'box2', width: 100, color: 'blue'},
        {name: 'box3', width: 100, height: 150, color: 'green'}
      ]
    }
  },
  methods: {
    setSize (box) {
      console.log('methods in')
      const height = box.width + box.height
      return {
        width: box.width + '%',
        height: height + 'px',
        backgroundColor: box.color
      }
    }
  }
}
</script>

결실

박스 2의 요소는요.이미 알고 있습니다

저널

박스의 요소가 사라진 거 set Size에서 알았어2回しか入らない일.

v-show 사용 시

방금 v-if로 쓴 곳만 v-show로 변경합니다

<template>
  <div class="hello">
    <div v-for="box in boxs" :key="box.name" :style="[setSize(box)]" v-show="box.height">
      {{ box.name }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      boxs: [
        {name: 'box1', width: 100, height: 50, color: 'red'},
        {name: 'box2', width: 100, color: 'blue'},
        {name: 'box3', width: 100, height: 150, color: 'green'}
      ]
    }
  },
  methods: {
    setSize (box) {
      console.log('methods in')
      const height = box.width + box.height
      return {
        width: box.width + '%',
        height: height + 'px',
        backgroundColor: box.color
      }
    }
  }
}
</script>

결실

box2에 display:none의 스타일이 첨부되어 있습니다. 알겠습니다) 위에 남아 있지만 스타일로 표시되지 않습니다.

저널

왜냐하면box2의 정보가 아직 남아있으니까3回ログ出力される

총결산

실제 같은 코드의 v-if와 v-show를 사용할 때 다음과 같은 것을 발견하였다
)의 디스플레이
함수 통과?
v-if
숨기기(개체 remove)
통하지 않다
v-show
숨기기(display:none)
통과
화면에는 둘 다 변화가 없음을 나타내지 않지만, 대상이 v-for로 반복되는 과정에서 함수를 이용하는 경우 v-show를 사용하면 의도치 않게 함수에 들어갈 수 있어 주의가 필요하다

최후

스스로 사이즈가 필요한 곳에서 v-show를 사용하여 데이터를 입력하는 도중 상태에서
함수 내에서 계산을 진행할 때 화면이 하얗게 변하여 실패했다
이번엔 자신의 의사록이지만 v-if, v-show를 구분해서 사용할 수 있게 도와줬으면 좋겠어요.