v-for详细_v-for后面的数组可以是函数吗-CSDN博客

本文链接：https://blog.csdn.net/Q2159621453/article/details/124971462

1.v-for遍历数组与对象，我实验后发现后面接in或of效果是一样的(可能也有什么是我没发现的，后面遇到了再来改)，数组可设置两个参数，对象可设置三个(多一个键值属性)。

<body>
    <div id="root">
        <ul>
            <li v-for="item in names">{{item}}</li>
            <li v-for="(item,index) in names">{{item}}-{{index}}</li>
            <li v-for="(item,key,index) in persons">{{item}}-{{key}}-{{index}}</li>
        </ul>
    </div>
    <script>
        const vm = new Vue({
            el: "#root",
            data() {
                return {
                    names: ['张三', '李四', '王五'],
                    persons: { realname: "张三", sex: "男", age: 19 }
                }
            }
        })
    </script>
</body>

2、v-for内key的使用

在vue中，每一个组件都有一个render函数，这个函数会生成一个虚拟dom，这就意味着每一个组件都对应一个虚拟dom树。

在v-for遍历时，所有数据会先在虚拟dom中，然后虚拟dom再遍历到页面。这样当数据发生改变时效率会更高，因为再虚拟dom中新数据与旧数据会发生对比，相同的就不会改变。这就要提到另一个元素key了(所以key最好设置成唯一值且不会变，例手机号、身份证等)，通过比较key值，旧数据有的不动。如果不加key，会按照遍历顺序添加key值，不过这样key就不是唯一的了。

不加key：

<body>
    <div id="root">
        <ul>
            <li v-for="(item,index) in person">{{item.name}}--<input type="text"></li>
        </ul>
        <button @click="addData">添加</button>
    </div>

    <script>
        const vm = new Vue({
            el:"#root",
            data(){
                return {
                    list:{id:4,name:'熊大'},
                    person:[{
								id: 1,
								name: '张三',
							},
							{
								id: 2,
								name: '李四',
							},
							{
								id: 3,
								name: '王五',
							}
						]
                }
            },
            methods:{
                addData(){
                    this.person.unshift(this.list)
                }
            }
        })
    </script>

添加key:

<div id="root">
 <ul>
  <li v-for="(item,index) in person" :key="item.id">{{item.name}}--<input type="text"></li>
  </ul>
  <button @click="addData">添加</button>
 </div>

3、数组的响应方式。不能使用this.arr[1] 数组内部内容已经更改，但不会渲染到页面。

<body>
    <div id="root">
        <div>{{name}}</div>
        <ul>
            <li v-for="item in arr">{{item}}</li>
        </ul>
        <div>{{obj.username}}--{{obj.age}}</div>
        <br>
        <button @click="change">更改</button>
    </div>

    <script>
        const vm = new Vue({
            el: "#root",
            data() {
                return {
                    name: "张三",
                    arr: ['a', 'b', 'c'],
                    obj: { username: "李四", age: 18 }
                }
            },
            methods: {
                change(){
                    // this.name = '李四';
                    this.arr[1] = 'fff'
                    // this.obj.username = "王五"
                }
            }
        })
    </script>
</body>