vue 中的key值

<div id="app">
    <div v-if="show">
        用戶名：<input>
    </div>
    <div v-else="show">
        郵箱名：<input>
    </div>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      show: false,
    }
  })
</script>

vue會盡量復用已有的dom，在這個例子中，當show的值發生改變時，input並不會重新渲染(如果input框中有輸入值時，不會改變)，解決辦法就是input 添加key屬性。

<div id="app">
    <div v-if="show">
        用戶名：<input key="username">
    </div>
    <div v-else="show">
        郵箱名：<input key="mail">
    </div>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      show: false,
    }
  })