Vue指令之`v-for`和`key`属性

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

2.2.0+ 的版本里，**当在组件中使用** v-for 时，key 现在是必须的。

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “**就地复用**” 策略。如果数据项的顺序被改变，Vue将**不是移动 DOM 元素来匹配数据项的顺序**， 而是**简单复用此处每个元素**，并且确保它在特定索引下显示已被渲染过的每个元素。

为了给 Vue 一个提示，**以便它能跟踪每个节点的身份，从而重用和重新排序现有元素**，你需要为每项提供一个唯一 key 属性。 

注意：

 　　在遍历对象身上的键值对的时候， 除了 有  val  key  ,在第三个位置还有 一个 索引  i

　　v-for=" (val,key i)" ,如果只写一个参数表示值，两个是值和键 三个，值、键、索引

 

v-for 循环普通数组

<body>
    <!-- v-for 循环普通的数组 和使用foreach 挺像 -->
        <div class="box">
            <p v-for="(item,i) in list">索引值：{{i}}----------值：{{item}}</p>
        </div>
    <script src="./lib/vue-2.4.0.js"></script>
    <script>
    var vm=new Vue({
        el:'.box',
        data:{
            list:[
                1,2,3,4,5,6
            ]
        }
    });
    </script>
</body>

v-for循环对象数组

<body>
    <div class="box">
        <p v-cloak v-for="(user,i) in list">id：{{user.id}}---------名称：{{user.name}}</p>
    </div>
    <script src="lib/vue-2.4.0.js"></script>
    <script>
        var vm=new Vue({
            el:'.box',
            data:{
                list:[
                    {id:1,name:'杜伟'},
                    {id:2,name:'王玥'},
                    {id:3,name:'任凯'},
                    {id:4,name:'刘海波'}
                ]
            },
            methods:{
            }
        });
    </script>
</body>

v-for 循环对象

<body>
    <div class="box">
        <!-- 注意：在遍历对象身上的键值对的时候， 除了 有  val  key  ,在第三个位置还有 一个 索引  
        -->
        <p v-for="(item,i) in pipor">{{item}}----{{val}}-----{{i}}</p>
    </div>
    <script src="lib/vue-2.4.0.js"></script>
    <script>
        var vm=new Vue({
            el:'.box',
            data:{
                pipor:{
                    id:1,
                    name:'杜伟',
                    gender:'男'
                }
            }
        });
    </script>

v-for 迭代数字

<body>
    <div class="box">
        <p v-for="item in 10" v-text="item"> </p>
    </div>
    <script src="lib/vue-2.4.0.js"></script>
    <script>
        var vm=new Vue({
            el:'.box',
            data:{
            }
        });
    </script>
</body>

 Key

　　*跟踪每个节点的身份，从而重用和重新排序现有的元素

　　*理想的key值是每项都有的且唯一的id。data.id

数组更新检测

　　使用以下方法操作数组，可以检测变动

　　push() pop()　　shift()　　unshift()　　splice() 　　sort() revrse()

以上是 Vue指令之`v-for`和`key`属性 的全部内容， 来源链接： utcz.com/z/379497.html

回到顶部