<body>
<div id="app">
<div class="box">
<span v-if="isShow">
<label for="username">用户账户</label>
<input type="text" placeholder="用户账户" id="username" key="username">
<!-- 在input里面加key 可以辨识不一样的input 当切换input后 不会留下上一个input输入的内容 -->
</span>
<span v-else>
<label for="email">用户邮箱</label>
<input type="text" placeholder="用户邮箱" id="email" key="email">
</span>
<button @click="changeDl">点击切换</button>
</div>
</div>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js'></script>
<script>
const app = new Vue({
el: '#app',
data: {
isShow: true
},
methods: {
changeDl() {
this.isShow = !this.isShow;
let inp = document.querySelectorAll('input');
inp.value = ""
}
}
})
</script>
</body>