<div id="app"> <template v-if="type === ‘name‘"> <label>用户名：</label> <input type="text" placeholder="请输入用户名..."> </template> <template v-else> <label>邮箱：</label> <input type="text" placeholder="请输入邮箱..."> </template> <button @click="handleToggleClick">切换输入类型</button> </div> <script src="vue.js"></script> <script> var app = new Vue({ el: ‘#app‘, data: { type: ‘name‘ }, methods: { handleToggleClick() { this.type = this.type === ‘name‘ ? ‘mail‘ : ‘name‘; } }
vue在渲染元素时，处于效率考虑， 会尽量地复用已有的元素而非重新渲染，比如上面的实例，在，点击切换按钮，虽然DOM变了，但是之前在输入框键入的内容并没有改变，只是替换了placeholder的内容，说明input元素被复用了，如果不希望这样做，可以使用vue.js提供的key属性，它可以让你自己决定是否要复用元素，key的值必须是唯一的！！！，例如下面这样：
<div id="app"> <template v-if="type === ‘name‘"> <label>用户名：</label> <input type="text" placeholder="请输入用户名..." key="neme-input"> </template> <template v-else> <label>邮箱：</label> <input type="text" placeholder="请输入邮箱..." key="mail-input"> </template> <button @click="handleToggleClick">切换输入类型</button> </div> <script src="vue.js"></script> <script> var app = new Vue({ el: ‘#app‘, data: { type: ‘name‘ }, methods: { handleToggleClick() { this.type = this.type === ‘name‘ ? ‘mail‘ : ‘name‘; } }
给input元素添加key，就不会复用了，切换类型时键入的内容也会被删除，不过label元素仍然是被复用的，因为没有添加key属性！
原文地址：https://blog.csdn.net/rose999ying/article/details/95111037
原文：https://www.cnblogs.com/yihengbaobei/p/13151317.html