v-once

v-once는 vue.js에서 한번만 랜더링 되고 이후에 업데이트는 되지않는다.

따라서 업데이트를 원하지 않을때 사용하면 좋다.

 

html (bootstrap)

<div id="app">
   <button class="btn btn-info" @click="changeMsg">Change</button>
   <hr />
   <ul class="list-group">
      <li v-once class="list-group-item">{{ msg }}</li>
      <li class="list-group-item">{{ msg2 }}</li>
      <li class="list-group-item">{{ msg2 }}</li>
   </ul>      
</div>

 

js

const vm = new Vue ({
   el: '#app',
   data: {
      msg: 'once',
      msg2: 'sample data'
   },
   methods: {
      changeMsg() {
         this.msg = 'new once',
         this.msg2 = 'new sample data'
      }
   }
});

 

버튼 클릭전

---

버튼 클릭 후