zoukankan      html  css  js  c++  java
  • v-for中的key的使用【key的作用主要是是为了高效的更新虚拟DOM】

    vue中列表循环需加:key="唯一标识" 唯一标识可以是item里面id index等,因为vue组件高度复用增加Key可以标识组件的唯一性,为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM;
    没有绑定key是这样的:
    绑定了key的效果:
    源码:
     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     7     <title>Document</title>
     8     <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
     9     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    10     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    11     <script src="lodash.min.js"></script>
    12     <style>
    13         .userList{
    14             border: 1px solid seagreen;
    15             padding: 10px 20px;
    16             margin: 10px 0;
    17         }
    18     </style>
    19 </head>
    20 <body>
    21     <div id="app">
    22         
    23     </div>
    24     <template id="my-com">
    25         <div class="userList"  :id="obj.id" >
    26             <h4>武将:{{obj.name}}</h4>
    27             <p>简介:{{obj.content}}</p>
    28             <div class="input-group">
    29                 <input type="text" class="form-control" placeholder="来将可留姓名" >
    30             </div>
    31         </div>
    32     </template>
    33     <script type="text/javascript">
    34         Vue.component('my-com',{
    35             template:'#my-com',
    36             props:{//传值
    37                 obj:Object
    38             }
    39         })
    40         var App = {
    41             data(){
    42                 return {
    43                     datas:[
    44                         {id:1,name:'吕布',content:'我是吕布'},
    45                         {id:2,name:'赵云',content:'我是赵云'},
    46                         {id:3,name:'典韦',content:'我是典韦'},
    47                         {id:4,name:'关羽',content:'我是关羽'},
    48                         {id:5,name:'马超',content:'我是马超'},
    49                         {id:6,name:'张飞',content:'我是张飞'},
    50                     ]
    51                 }
    52             },
    53             template:'<div class="container"><h4>key的作用主要是是为了高效的更新虚拟DOM</h4><button @click="change" class="btn btn-success">改变顺序</button><my-com v-for="(item,index) in datas" :obj="item" :key="item.id"></my-com></div>',
    54             methods: {
    55                 change(){
    56                     this.datas = _.shuffle(this.datas);
    57                 }
    58             },
    59         }
    60         new Vue({
    61             el:'#app',
    62             components:{
    63                 App
    64             },
    65             template:'<App></App>'
    66         })
    67     </script>
    68 </body>    
    69 </html>
    70 <!--
    71 
    72    如果for循环时不给 不给每个元素 添加key,点击打乱顺序时,会出现 元素与内容对应不上的
    73    添加key,就不会出现打乱节点的情况
    74 
    75 -->
  • 相关阅读:
    as
    android 手势上下滑动头部自动隐藏View标签
    ListView 禁止滑动和点击
    Android corners 圆角属性各个版本之间兼容问题
    Android 解耦利器 EventBus
    Android 修改Activity标题样式 actionBar
    JavaScript 的写的grid Ajax加载数据 表格内增删改查 支持自定义分页大小 支持批量删除数据,支持按住ctrl多选
    Andorid 应用程序开启多进程
    比较两个文件是否相同(计算MD5效验码比较方式)
    Android 文件上传支持拍照录用录视频
  • 原文地址:https://www.cnblogs.com/suni1024/p/11430067.html
Copyright © 2011-2022 走看看