Vue學習筆記(四) 條件渲染和列表渲染

時間 2019-11-12

標籤 vue 學習筆記條件渲染列表简体版

原文原文鏈接

一、條件渲染

（1）v-ifjavascript

v-if 指令 用於條件性（根據表達式的值）渲染內容，能夠與 v-else 指令 和 v-else-if 指令 一同使用html

<!DOCTYPE html>
<html>

<head>
    <title>Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <p v-if="type === 'A'">A</p>
        <p v-else-if="type === 'B'">B</p>
        <p v-else-if="type === 'C'">C</p>
        <p v-else>Else</p>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                type: 'A'
            }
        })
    </script>
</body>

</html>

（2）v-if & v-showvue

v-show 指令 一樣能夠根據表達式的真假渲染內容java

<!DOCTYPE html>
<html>

<head>
    <title>Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <p v-show="isSeen">A</p>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                isSeen: true
            }
        })
    </script>
</body>

</html>

它們不一樣之處在於：v-if 是直接添加或刪除 DOM 元素，而 v-show 是修改元素的 display 屬性npm

所以，v-if 適用於相對穩定的元素，v-show 適用於頻繁切換的元素數組

（3）templateapp

v-if 是一個指令，所以必須添加到一個元素上，若是但願同時添加到多個元素上該怎麼辦呢？學習

可使用 <template> 元素當作不可見的包裹元素，並在上面使用 v-ifspa

<!DOCTYPE html>
<html>

<head>
    <title>Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <template v-if="isOk">
            <h1>Title</h1>
            <p>Paragraph 1</p>
            <p>Paragraph 2</p>
        </template>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                isOk: true
            }
        })
    </script>
</body>

</html>

二、列表渲染

v-for 指令 用於渲染一個列表.net

（1）使用數組

<!DOCTYPE html>
<html>

<head>
    <title>Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="item in items">
                {{ item.message }}
            </li>
        </ul>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                items: [
                    { message: 'Hello' },
                    { message: 'Hi' }
                ]
            }
        })
    </script>
</body>

</html>

v-for 用於數組時，還支持一個可選的第二個參數，即當前項的索引：v-for="(item, index) in items"

（2）使用對象

<!DOCTYPE html>
<html>

<head>
    <title>Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="value in object">
                {{ value }}
            </li>
        </ul>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                object: {
                    firstName: 'Steve',
                    lastName: 'Jobs'
                }
            }
        })
    </script>
</body>

</html>

v-for 用於對象時，還支持一個可選的第二個參數，即當前項的鍵：v-for="(value, key) in object"

還支持一個可選的第三個參數，即當前項的索引：v-for="(value, key, index) in object"

（3）使用整數

<!DOCTYPE html>
<html>

<head>
    <title>Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <span v-for="n in 10">{{ n }} </span>
    </div>

    <script>
        var vm = new Vue({
            el: '#app'
        })
    </script>
</body>

</html>

（4）維護狀態

當 Vue 正在更新使用 v-for 渲染的元素列表時，它默認使用「就地更新」的策略

也就是說，若是數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序

而是就地更新每一個元素，而且確保它們在每一個索引位置正確渲染

所以爲了跟蹤每一個節點，咱們須要爲每個項提供一個惟一的 key（通常使用基本屬性做爲 key）

<div v-for="item in items" v-bind:key="item.id">
  <!-- 內容 -->
</div>

（5）數組更新檢測

對於數組而言，使用變異方法會自動觸發視圖更新，變異方法包括：

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

// 能夠嘗試在控制檯中直接對前面的例子調用變異方法
vm.items.push({ message: 'Goodbye'})

而使用非變異方法則老是返回一個新數組，這時可使用新數組替代舊數組以觸發視圖更新，非變異方法包括：

filter()
concat()
slice()

// 能夠嘗試在控制檯中對前面的例子調用非變異方法，使用新數組替代舊數組
vm.items = vm.items.filter(function (item) {
  return item.message.match(/Hi/)
})

注意，還有如下兩種狀況不能檢測數組的變化：

利用索引設置數組的值，例如 vm.items[indexOfItem] = newValue
修改數組的長度，例如 vm.items.length = newLength

這時，咱們均可以使用變異方法 splice() 解決：

利用索引設置數組的值，vm.items.splice(indexOfItem, 1, newValue)
修改數組的長度，vm.items.splice(newLength)

（6）對象變動檢測

如下的狀況一樣不能檢測對象的變化：

添加對象屬性，例如 vm.newValue = value （此時，newValue 不是響應式屬性）

這時，咱們可使用實例方法 vm.$set 解決：

添加對象屬性，vm.$set(object, propertyName, value)

【閱讀更多 Vue 系列文章，請看 Vue學習筆記】

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。