Vue.js用Key值來管理可複用元素
阿新 • • 發佈：2019-02-04
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>
執行結果：
