key值被用于标注唯一性。
如下例子：
<body>
<div id="app">
<div v-if="show">
用户名：<input type="text">
</div>
<div v-else>
邮箱名：<input type="text">
</div>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
show: false,
}
})
</script>
</body>
结果在页面上显示的是：
image.png
这个没有问题。
然后随机在邮箱名中的框内输入一些数字（比如：1234）；点击F12，在控制台上输入vm.$data.show = true 的时候，页面中的邮箱名会改成用户名，但是框内的内容并没有像我们期望的那个清空，而是继续显示着之前的数字（1234）：
image.png
原理是这样的：Vue在去重新渲染页面的时候，会尽量使用页面上已经存在的dom,所以当Vue重新渲染的时候，它会发现页面上已经存在一个dom，这时它就会使用已经存在的。
这时，key值就可以有作用了。key值写在input框内，如下：
<body>
<div id="app">
<div v-if="show">
用户名：<input type="text" key = "username">
</div>
<div v-else>
邮箱名：<input type="text" key = "password">
</div>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
show: false,
}
})
</script>
</body>
因为key值将input框区分为两个不同的input框，所以如果像上面那样做重新渲染的话，input框内就不会沿用以前的数据了。
网友评论