Vue 2 | Part 3 經常使用指令合集

本期跟你們分享的，是Vue裏面除了v-bind和v-on以外的指令。由於都挺簡單的，因此就一次性解決了。

v-text

直接把文字綁定到html。以前咱們一直使用大鬍子語法往html裏面綁定數據，若是數據是純字符串的話，也可使用v-text。

<div id="app">
    <h1 v-text="info"></h1>
</div>

固然也能夠綁定其它類型的數據，它們會以字符串的輸出。

v-html

至關於jq的html方法，把數據中的html字符串嵌入到目標元素裏面。

<div id="app">
    <h1 v-html="html"></h1>
</div>

<!-- ... ... -->

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            html: '<small>使用v-html渲染</small>'
        }
    });
</script>

注意v-text和v-html二者，往html裏插入數據之後新數據<small>和使用指令的元素<h1>之間的層級關係。

v-if/v-else-if/v-else

我會把這三兄弟描述爲：在html中進行狀態控制的快捷指令。

下面用一個簡單的例子來演示。假設咱們的數據中status可能會返回loading、ready、fail三者之一，在頁面須要根據這個字段來顯示不一樣的東西：

<div id="app">
    <div v-if="status === 'loading'">
        <div class="alert alert-info">loading</div>
    </div>
    <div v-else-if="status === 'ready'">
        <div class="alert alert-success">ready</div>
    </div>
    <div v-else>
        <div class="alert alert-danger">fail</div>
    </div>
</div>

<!-- ... ... -->

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            status: 'loading'
        }
    });
</script>

在console中直接改變status值，能夠看到效果：

同時要留意，使用這三兄弟的時候，vue只會生成斷定爲true的那個節點：

v-show

根據布爾值決定目標元素的css display值。

<div id="app">
    <h1 v-show="showHeader">{{ info }}</h1>
</div>

<!-- ... ... -->

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            info: 'hello hacker cafe',
            showHeader: true
        }
    });
</script>

修改showHeader的值

> app.showHeader = false

能夠看到元素中增長了css style，原來的文字也被隱藏了：

固然showHeader也能夠賦值爲其它東西，可是最後都會轉換爲布爾值來決定目標元素是否顯示。

v-show和v-if的區別

打開chrome devtools來查看二者渲染出來的dom。能夠看到v-show只改變元素的css，可是v-if會決定是否生成這個dom節點（可查看上方截圖）。

v-once

只根據數據渲染一次。日後數據改變時，目標元素再也不從新渲染。

咱們用v-text和v-once進行對比：

<div id="app">
    <div class="alert alert-danger" v-once>v-once: {{ once }}</div>
    <div class="alert alert-info">mustache: {{ once }}</div>
</div>

<!-- ... ... -->

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            once: '遵命主人，只渲染一次'
        }
    });
</script>

保存代碼並刷新瀏覽器後，兩句話是同樣的：

對數據中的once值進行修改後，使用v-once的元素不更新：

這期就到這裏，敬請期待下一期：v-bind綁定屬性和class。

寫在最後

源碼地址：https://github.com/levblanc/v...

視頻攻略：小的不才，爲求一讚，自制 本期視頻攻略 在此。