vue基礎----key的做用

時間 2019-11-08

標籤 vue 基礎 key 简体版

原文原文鏈接

1.key 在虛擬dom中標記不一樣的結構，for循環中須要添加上vue

 1 <body>
 2     <div id="app">
 3         <div v-if="flag">
 4             <span>aaaa</span>
 5             <input type="text" key="1">
 6         </div>
 7         <div v-else>
 8             <span>bbb</span>
 9             <input type="text" key="2">
10         </div>
11 
12     </div>
13     <script src="./node_modules/vue/dist/vue.js"></script>
14     <script>
15         /*
16          ①flag 改變虛擬dom 在渲染的時候 發現span 和input 結構都是同樣的，只有span的內容不同，
17         因此從新渲染了了span,input沒有渲染，想讓input從新渲染 只須要添加一個key就能夠了
18          ② 通常循環添加key的時候不要添加索引，用後臺傳給前臺惟一的id做爲key
19             緣由：假如如今數據逆序後，0--->A 如今變成0---->B，內容改變，元素就會從新渲染
20                   可是，若是用id元素只是改變了位置，並不須要從新渲染dom，提升性能
21         */
22         let vm = new Vue({
23             data:{
24                 flag:true
25             },
26             methods:{
27                 
28             }
29         }).$mount("#app");
30     
31     </script>
32 </body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。