Vue風格指南 - v-if/v-else-if/v-else下的key
阿新 • • 發佈:2018-08-06
else edit lse pkg nbsp 識別 之間 submit -i 沒有在
沒有在 v-if
/v-if-else
/v-else
中使用 key
謹慎使用
如果一組 v-if
+ v-else
的元素類型相同,最好使用 key
(比如兩個 <div>
元素)。
默認情況下,Vue 會盡可能高效的更新 DOM。這意味著其在相同類型的元素之間切換時,會修補已存在的元素,而不是將舊的元素移除然後在同一位置添加一個新元素。如果本不相同的元素被識別為相同,則會出現意料之外的副作用。
如以下示例:在沒有添加key屬性的情況下,點擊“Edit”也會觸"submit"元素的默認事件
反例:
Html代碼- <script src="https://unpkg.com/vue"></script>
- <div id="app">
- <form>
- <button v-if="isEditing" type="submit">
- Save
- </button>
- <button v-else @click="isEditing = true">
- Edit
- </button>
- </form>
- </div>
而添加不一樣的key值就正常了。
正例:
Html代碼- <script src="https://unpkg.com/vue"></script>
- <div id="app">
- <form>
- <button v-if="isEditing" type="submit" key="save">
- Save
- </button>
- <button v-else @click="isEditing = true" key="edit">
- Edit
- </button>
- </form>
- </div>
Vue 風格指南:https://cn.vuejs.org/v2/style-guide/
Vue風格指南 - v-if/v-else-if/v-else下的key