06.Vue.js : v-for 指令

最新推荐文章于 2023-04-20 21:05:33 发布

屋顶上的小喵

最新推荐文章于 2023-04-20 21:05:33 发布

阅读量267

点赞数

分类专栏： Vue.js 文章标签： v-for Vue.js

本文链接：https://blog.csdn.net/vivian_1122/article/details/88632255

版权

Vue.js 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

2.20+版本里,组件中使用v-for时,key现在是必须的;
key是用来标识唯一身份的;
注意:v-for 循环的时候,key属性只能使用 number或者string
    key在使用的时候,必须使用v-bind属性绑定的形式,指定key的值;
	在组件中,使用v-for循环的时候,或者在一些特殊情况中,如果v-for有问题,必须在使用v-for的同时,指定唯一的字符串/数字类型 :key 值
:key="item.id"

<!DOCTYPE html>
<html lang="en">

<head>
    <title>v-for</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 使用v-for渲染数组和 对象
            特点：v-for 能够根据data中数据的变化自动刷新视图；
           v-for 渲染数组
           1.在标签的属性位置写上v-for='item in arr';item 表示数组中的每一项，这个名字可以随意写，
           arr表示需要遍历的数组;
           2.在标签的属性位置上写上v-for='(item,index) in arr'; index 表示数组项的索引值

           v-for 渲染对象
           1.在标签的属性位置写上v-for='value in obj'; value 表示对象键的值，这个名字可以随意写，
           obj表示需要遍历的对象
           2.在标签的属性位置写上v-for='(value,key) in obj'; key 表示对象的键

           注意：以下两种情况不会触发视图更新
           1.当使用数组的length属性去改变数组的时候，不会触发视图更新；
           2.使用数组下标的方式去改变数组的时候，也不会触发视图更新；

           解决上述问题：
           1.使用Vue.set(arr,index,newVal);
           arr是需要改变的数组，
           index是数组里面的项，
           newVal是改变的值；
           2.Array.prototype.splice();

           注意：v-for 必须结合key属性来使用，它会唯一标识数组中的每一项，未来当数组中的那一项改变的时候，
           他会只更新那一项，
           好处就是提升性能，注意key的值唯一，不能重复；
       -->
        <p v-for='item in user'>{{item.age}}:{{item.name}}</p>
        <p v-for="(item,index) in user">{{item.age}}：{{index}}</p>
        <p v-for='value in boss'>{{value}}</p>
        <p v-for='(value,key,index) in boss'>{{value}}---{{key}}---{{index}}</p>

    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                user: [{
                    name: 'jack',
                    age: 12
                }, {
                    name: 'vivi',
                    age: 18
                }, {
                    name: 'bibi',
                    age: 19
                }, ],
                boss: {
                    name: 'maYun',
                    age: 18
                }

            }
        })
    </script>
</body>

</html>