Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。
1.那么在上面的代码中切换type将不会清除用户已经输入的内容。因为两个模板使用了相同的元素,input不会被替换掉——仅仅是替换了它的placeholder。
<body>
<div id="yk3">
<div v-if="type==='userName'">
<lable>UserName</lable>
<input placeholder="please enter userName">
</div>
<div v-else="type==='password'">
<label>Password</label>
<input placeholder="please enter password">
</div>
<button v-on:click="change">change</button>
</div>
<script>
new Vue({
el:"#yk3",
data:{
type:"userName"
},
methods:{
change:function () {
return this.type==="userName"?this.type="password":this.type="userName"
}
}
})
</script>
</body>运行结果：
2.使用key给input一个唯一值，每次切换时，输入框都将被重新渲染。
<body>
<div id="yk4">
<div v-if="type==='userName'">
<lable>UserName</lable>
<input placeholder="please enter userName" key="userName">
</div>
<div v-else="type==='password'">
<label>Password</label>
<input placeholder="please enter password" key="password">
</div>
<button v-on:click="change">change</button>
</div>
<script>
new Vue({
el:"#yk4",
data:{
type:"userName"
},
methods:{
change:function () {
return this.type==="userName"?this.type="password":this.type="userName"
}
}
})
</script>
</body>运行结果：
252
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
