v-if, v-show

v-if는 조건이 만족하면 아래 엘리먼트를 렌더링 하겠다는 의미

    <table class="table table-bordered" v-show="tableShow">
      <tr :key="i" v-for="(d,i) in options">
        <td>{{ d.v }}</td>
        <td>{{ d.t }}</td>
      </tr>
    </table>

v-show또한 false인 경우엔 안보여주고 true인 경우에는 보이는데

둘의 차이는

 

v-if는 조건이 만족하지않으면 아예 렌더링 자체를 하지않고

v-show는 true건 false건 렌더링을 한다. 화면엔 보이지않아

화면에서 뭔가 보여줬다 안보여줬다가 자주되면 v-show를쓰면 리소스를 덜 잡아먹는다.

특정조건에 이르렀을때만 보여주는게 좋은게

사용자가 그액션을 할지 안할지 모르는건 일단 v-if로 렌더링을 하지 않는게 좋다

 

그래서 이 용도에 맞게끔 사용을 해야함!