有时候,我们登录的时候会有多个选项,比如切换成手机号邮箱登录,但是当我们点击切换后,改变了样式,input里面的值却没有改变过来
<span v-if="active">
<label>手机号</label>
<input type="" name="" id="name" />
</span>
<span v-else>
<label>邮箱</label>
<input type="" name="" id="name" />
</span>
<button type="button" @click="change">切换账号</button>
这个原因是,在vue中,会有一个虚拟dom,为了提高效率,当点击切换的时候,虚拟dom会判断一下是不是之前的结构,如果是,就用之前的结构,所以input里面的值没有改变
但是我们要解决这个问题,那么我们就在input里面加一个标识,给他加一个key=“”,当两个名字不一样的时候,就会清除之前的结构。
<span v-if="active">
<label>手机号</label>
<input type="" name="" id="name" key="a" />
</span>
<span v-else>
<label>邮箱</label>
<input type="" name="" id="name" key="b"/>
</span>
<button type="button" @click="change">切换账号</button>
标签:手机号,dom,账号,问题,切换,邮箱,input 来源: https://www.cnblogs.com/fhzm/p/13498215.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。