问题描述

如题,利用Vue中if-else切换显示标签而其中输入框的value值不改变:

代码如下:

1
2
3
4
5
6
7
8
9
10
11
<div id="app">
<span v-if="change">
<label for="username">用户账号</label>
<input type="text" id="username" placeholder="用户账号">
</span>
<span v-else>
<label for="email">用户邮箱</label>
<input type="text" id="email" placeholder="用户邮箱">
</span>
<button @click="change = !change">切换类型</button>
</div>
1
2
3
4
5
6
7
8
<script>
const app = new Vue({
el: '#app',
data: {
change: true
}
})
</script>

问题如下:

可以看到在点击“切换类型”时候,输入框中的value值并不改变。

这关乎Vue底层的实现方式,出于性能考虑,会尽可能的复用已经存在的元素,而非重新创建新的元素,但是在某些场景中并不希望如此。


解决方案

在不同的标签中赋予不同的key值,这样Vue在渲染的过程中就会判定为不同的内容,从而重新加载新的输入框。

1
2
3
4
5
6
7
8
9
10
11
<div id="app">
<span v-if="change">
<label for="username">用户账号</label>
<input type="text" id="username" placeholder="用户账号" key="username"> <!--在这里-->
</span>
<span v-else>
<label for="email">用户邮箱</label>
<input type="text" id="email" placeholder="用户邮箱" key="email"> <!--在这里-->
</span>
<button @click="change = !change">切换类型</button>
</div>

后记

快乐学前端