一.Vue初體驗：

二.Vue條件命令：

三.Vue循環指令：

四.Vue處理用户輸入：

五.Vue組件初體驗：

六.Vue實例：

七.Vue模板語法：

八.Vue計算屬性：

九.Vue.js偵聽器：

十.Vue.js的class綁定：

十一.Vue style綁定：

十二.Vue 條件渲染：

十三.Vue 列表渲染：

十四.Vue事件處理：

十五.Vue表單輸入綁定：

十六.Vue中引用圖片：

使用v-for遍歷數組對象

我們可以用 v-for 指令基於一個數組來渲染一個列表。v-for 指令需要使用book in books形式的特殊語法，其中 books 是源數據數組，而 book 則是被迭代的數組元素的別名。具體操作如下代碼

data:{
            books:[
                {
                    name:"三國演義",
                    author:"羅貫中"
                },
                {
                    name:"西遊記",
                    author:"吳承恩"
                },
                {
                    name:"水滸傳",
                    author:"施耐庵"
                },
                {
                    name:"紅樓夢",
                    author:"曹雪芹"
                }
            ]
        }
<table border="1">
        <!--第一行-->
        <tr>
            <td>循環下標</td>
            <td>書名</td>
            <td>作者</td>
        </tr>
        <!--books:要遍歷的數組元素 book：每一個要遍歷元素的別名，book想當於是book裏面的每一個對象-->
        <!--除了book，還可以加一個下標:index  in也可以改成of-->
        <!--v-for既可以遍歷數組對象，也可以遍歷普通對象-->
        <tr v-for="(book,index) in books" v-bind:key="index">
            <td>{{index}}</td>
            <td>{{book.name}}</td>
            <td>{{book.author}}</td>
        </tr>
    </table>

循環數組對象瀏覽器顯示如下

vue 循環數組 數組加索引怎樣實現_vue 循環數組 數組加索引怎樣實現

在 v-for 塊中，我們可以訪問所有父作用域的屬性。v-for 還支持一個可選的第二個參數，即當前項的索引。

<tr v-for="(book,index) in books" v-bind:key="index">
            <td>{{index}}</td>
            <td>{{book.name}}</td>
            <td>{{book.author}}</td>
        </tr>

使用v-for遍歷單個對象

data:{
            site:{
                url:"https://lqgjava.github.io/",
                name:"凌楓博客",
                server:"github"
            }
        }
<div v-for="(s,p,index) in site" v-bind:key="index">{{s}}--{{p}}--{{index}}</div>

單個對象遍歷瀏覽器顯示如下

vue 循環數組 數組加索引怎樣實現_#Vue.js的數組對象循環_02

你也可以提供第二個的參數為 property 名稱 (也就是鍵名)：下面代碼的p就是鍵名

<div v-for="(s,p,index) in site" v-bind:key="index">{{s}}--{{p}}--{{index}}</div>

數組更新檢測

變異方法

Vue 將被偵聽的數組的變異方法進行了包裹，所以它們也將會觸發視圖更新。這些被包裹過的方法包括：

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

你可以打開控制枱，然後對前面例子的 books 數組嘗試調用變異方法。比如 app.books.push({name:"鬥破蒼穹",author:"天蠶土豆"})。

vue 循環數組 數組加索引怎樣實現_#Vue的for循環_03

詳細代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue的條件渲染</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <table border="1">
        <!--第一行-->
        <tr>
            <td>循環下標</td>
            <td>書名</td>
            <td>作者</td>
        </tr>
        <!--books:要遍歷的數組元素 book：每一個要遍歷元素的別名，book想當於是book裏面的每一個對象-->
        <!--除了book，還可以加一個下標:index  in也可以改成of-->
        <!--v-for既可以遍歷數組對象，也可以遍歷普通對象-->
        <tr v-for="(book,index) in books" v-bind:key="index">
            <td>{{index}}</td>
            <td>{{book.name}}</td>
            <td>{{book.author}}</td>
        </tr>
    </table>
    <hr>
    <!--也可以拿到屬性的key-->
    <!--遍歷普通對象-->
    <div v-for="(s,p,index) in site" v-bind:key="index">{{s}}--{{p}}--{{index}}</div>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            books:[
                {
                    name:"三國演義",
                    author:"羅貫中"
                },
                {
                    name:"西遊記",
                    author:"吳承恩"
                },
                {
                    name:"水滸傳",
                    author:"施耐庵"
                },
                {
                    name:"紅樓夢",
                    author:"曹雪芹"
                }
            ],
            site:{
                url:"https://lqgjava.github.io/",
                name:"凌楓博客",
                server:"github"
            }
        }
        });
</script>
</body>
</html>