<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<span v-if="ifUser">
<label for="username">用户名:</label>
<input type="text" id="username" value="" placeholder="用户名" />
</span>
<span v-else>
<label for="email">邮箱:</label>
<input type="text" id="email" value="" placeholder="邮箱" />
</span>
<button type="button" @click="ifUser = !ifUser">切换</button>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
ifUser: true,
},
})
</script>
</body>
</html>
![](https://img2020.cnblogs.com/blog/1747317/202107/1747317-20210701192211766-369309620.png)
![](https://img2020.cnblogs.com/blog/1747317/202107/1747317-20210701192204839-897316319.png)