v-if的demo

在登录网站是经常可以选择使用账户名或者邮箱登录的切换按钮。要求点击按钮切换登录方式。

            <div id="app">
			<span v-if="isUser">
				<label for="user">用户</label>
				<input type="text" placeholder="请输入用户">
			</span>
			
			<span v-else>
				<label for="user">邮箱</label>
				<input type="text" placeholder="请输入邮箱">
			</span>
			
			<button type="button" @click="changetype">切换类型</button>
            </div>

			<script src="vue.js"></script>
			<script type="text/javascript">
				const vm = new Vue({
					el:"#app",
					data(){
						return{
							isUser:true
						}
					},
					methods:{
						changetype(){
							this.isUser = !this.isUser
						}
					}
				})

                // 这里有个小问题，如果已经输入了账号了，此时想切换到邮箱输入，输入框未自己清空。
                // 这里需要了解一下vue底层操作，此时input输入框值被复用了。
                // vue在进行DOM渲染是，处于性能考虑，会复用已经存在的元素，而不是每次都创建新的DOM元素。
                // 在上面demo中，Vue内部发现原来的input元素不再使用，所以直接将其映射对应虚拟DOM，用来复用。
                // 如果不希望出现类似复用问题，可以给对应的dom元素加上key值，并保证key不同。
                
                // <input type="text" id="username" placeholder="请输入用户名" key="username">
                // <input type="text" id="email" placeholder="请输入用户邮箱" key="email">