vue第三弹：还看什么视频，有这个一下就会了

当你在Vue.js中使用v-for指令时，你可以很方便地遍历数组或对象，并为其生成相应的DOM元素或组件实例。这个指令可以用在<template>标签、组件或DOM元素上。

遍历数组

在v-for的语法(item,index) in arr，item是数组的每一项，index是数组的下标。index可以省略，只有item还可以省略括号

假设你有一个数组：

data: {
  arr: [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' }
  ]
}

你可以使用v-for来遍历这个数组，并为每个元素创建一个DOM元素：

<ul>
  <li v-for="item in arr" :key="item.id">
    {{ item.name }}//拿到数组的name
  </li>
</ul>

遍历对象的属性

如果你有一个对象：

data: {
  user: {
    name: 'John',
    age: 30,
    email: 'john@example.com'
  }
}

你可以使用v-for来遍历对象的属性：

<ul>
  <li v-for="(value, key) in user" :key="key">
    {{ key }}: {{ value }}
  </li>
</ul>

使用v-for的语法

• v-for="item in arr"：遍历数组，item为当前遍历到的元素（一般我们是用不到它的下标属性）。
• v-for="(value, key) in object"：遍历对象，value是属性值，key是属性名。

在使用v-for时，务必为每个遍历的项目提供一个唯一的:key，这有助于Vue更高效地渲染DOM，并在数据变化时追踪每个节点的身份。

v-for是Vue.js中非常强大和灵活的指令，可以用于各种循环渲染的场景，使得数据驱动的UI渲染变得更加简单和直观。

结合之前学的来一个小实战

渲染数组的每一项，在每一项后面加上删除键，可以任意删除其中的每一项。

<body>
    <div id="app"></div>
    <template id="my-app">
       <h3>黑子书架</h3>
       <ul>
            <li  v-for="(item,index) in booklist">
               <span>{{item.name}}</span> 
               <span>{{item.author}}</span> 
               <!-- 通过id来删除 -->
               <button @click="foo(item.id)":key="item.id">删除</button> <!-- 取到数组的id -->  
            </li>
       
        </ul>
    </template>
</div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const app = Vue.createApp({
            template:'#my-app',
            data(){
                return{
                    booklist:[
                        {id:1,name:'《红楼梦》',author:'曹雪芹'},
                        {id:2,name:'《西游记》',author:'吴承恩'},
                        {id:3,name:'《水浒传》',author:'施耐庵'},
                        {id:4,name:'《三国演义》',author:'罗贯中'}
                    ]
                }
            },
            methods:{
                foo(id){

                    this.booklist=this.booklist.filter(item=>item.id!==id)
                }

            }
        })
        app.mount('#app')
        
    </script>
</body>

注意

当在Vue的v-for循环中加上key属性，它帮助Vue更准确地追踪和管理每个循环项的变化。

没有key时，Vue会默认使用索引来管理这些项，但有时候这可能导致一些渲染问题，特别是在项重新排序、添加或删除时。

加上key能让Vue更好地识别和跟踪每个项的变化，避免意外的渲染行为，并提高性能。

简述一下

如果将上面的每一项都渲染到页面数，给其中一个li加上背景色，如果没有key，背景色不会在该被li删除后消失，反而会被复用。

有key那么背景色会随着该li一起消失而不被复用。