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,
    }
  })