6.2—用key来管理重复元素

<div id="app">
    <template v-if="flag">
        <label>哈哈</label>
        <input type="text" placeholder="哈哈">
    </template>
    <template v-else>
        <label>嘻嘻</label>
        <input type="text" placeholder="嘻嘻">
    </template>
</div>
<script>
    var vm=new Vue({
        el:'#app',
        data: {
            flag:true
        }
    })
</script>

如果2个模板使用了相同的元素，更改了flag值时，<template>会切换，但是input中已经输入的内容会被残留保存。

 

如果不想如此，则可以使用key来管理

<input type="text" placeholder="哈哈" key="key1">
<input type="text" placeholder="嘻嘻" key="key2">

当拥有不同的key的v-if进行切换的时候，系统会重新进行页面的渲染