vue基础----key的作用

1.key 在虚拟dom中标记不同的结构，for循环中需要添加上

 <body>

     <div id="app">

         <div v-if="flag">

             <span>aaaa</span>

             <input type="text" key="1">

         </div>

         <div v-else>

             <span>bbb</span>

             <input type="text" key="2">

         </div>

     </div>

     <script src="./node_modules/vue/dist/vue.js"></script>

     <script>

         /*

          ①flag 改变虚拟dom 在渲染的时候 发现span 和input 结构都是一样的，只有span的内容不一样，

         所以重新渲染了了span,input没有渲染，想让input重新渲染 只需要添加一个key就可以了

          ② 一般循环添加key的时候不要添加索引，用后台传给前台唯一的id作为key

             原因：假如现在数据逆序后，0--->A 现在变成0---->B，内容改变，元素就会重新渲染

                   但是，如果用id元素只是改变了位置，并不需要重新渲染dom，提高性能

         */

         let vm = new Vue({

             data:{

                 flag:true

             },

             methods:{

             }

         }).$mount("#app");

     </script>

 </body>

巴特西

vue基础----key的作用

最新文章

热门文章