[Vue.js] 페이지 로딩전 구분문자( {{ name }} ) 숨기기

뷰js를 사용했을 때 페이지에 들어가면 페이지가 아직 렌더링되지 않았을 때 {{ }} 가 보였다가 로딩이 완료되면 원하는 내용이 출력되는 것을 볼 수 있다.

잠깐 보이는거지만 은근히 신경 쓰일 수도 있다.

그래서 로딩이 완료되기 전에는 안보이도록 하는게 좋을 수도 있다.

찾아보니까 v-cloak을 이용하면 된다.

일단 css에 다음과 같이 작성한다.

<style>
  [v-cloak] { display: none; }
</style>

그리고 vuejs를 사용할 때 다음과 같이 v-cloak을 써준다.

 

<div id="test" v-cloak>
  <div>{{ name }}</div>
  <div>{{ age }}</div>
</div>

<script>
  var testApp = new Vue({
    el: "#test",
    data: {
      name: "juragi",
      age: 28
    }
  });
</script>