13.Vue列表渲染

使用v-for遍历数组对象

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用book in books形式的特殊语法，其中 books 是源数据数组，而 book 则是被迭代的数组元素的别名。具体操作如下代码

data:{
            books:[
                {
                    name:"三国演义",
                    author:"罗贯中"
                },
                {
                    name:"西游记",
                    author:"吴承恩"
                },
                {
                    name:"水浒传",
                    author:"施耐庵"
                },
                {
                    name:"红楼梦",
                    author:"曹雪芹"
                }
            ]
        }

 

        
        

            
循环下标
            
书名
            
作者
        
        
        
        
        

            
{{index}}
            
{{book.name}}
            
{{book.author}}
        
    

循环数组对象浏览器显示如下

image.png

在 v-for 块中，我们可以访问所有父作用域的属性。v-for 还支持一个可选的第二个参数，即当前项的索引。

            {{index}}
            {{book.name}}
            {{book.author}}
        

使用v-for遍历单个对象

data:{
            site:{
                url:"https://lqgjava.github.io/",
                name:"凌枫博客",
                server:"github"
            }
        }

{{s}}--{{p}}--{{index}}

单个对象遍历浏览器显示如下

image.png

你也可以提供第二个的参数为 property 名称 (也就是键名)：下面代码的p就是键名

{{s}}--{{p}}--{{index}}

数组更新检测

变异方法

Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

你可以打开控制台，然后对前面例子的 books 数组尝试调用变异方法。比如 app.books.push({name:"斗破苍穹",author:"天蚕土豆"})。

image.png