vue input框的复用 使用key值进行控制

当input框复用的时候，切换框会将隐藏掉的框的内容带过去

加上key属性之后，既不会出现上述情况，应用面比较窄

<template>
  <div class="hello">

    <!-- 复用写法 -->
    <label v-if="type === false">联系电话
      <input type="text" name="tel_num" />
    </label>
    <label v-else>邮箱
      <input type="text" name="email" />
    </label>

    <!-- 不服用写法，加上不同的key值 -->
    <label v-if="type === false">联系电话key
      <input type="text" name="tel" key="tel" />
    </label>
    <label v-else>邮箱key
      <input type="text" name="emails" key="emails" />
    </label>

    <button @click="changeInput()">切换</button>
  </div>
</template>

<script>


export default {
  name: 'HelloWorld',
  data () {
    return {
      type: false
    }
  },
  methods: {
    changeInput () {
      this.type = !this.type
    }
  },

  async created () {

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>