Vue 的條件渲染和列表渲染

時間  2019-11-11
標籤 vue 條件 渲染 列表 简体版
原文   原文鏈接

條件渲染

上一篇：Class 與 Style 綁定：https://segmentfault.com/a/11...
下一篇：Vue的事件處理方法：https://segmentfault.com/a/11...html

v-if

在 < template > 中配合 v-if 渲染一整組

在使用 v-if 控制元素的時候，咱們須要將它添加到這個元素上去。然而若是要切換不少元素的時候，一個個的添加就太麻煩了。這時候就可使用 < template > 將一組元素進行包裹，並在上面使用 v-if。最終的渲染結果不會包含 < template > 元素。segmentfault

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

<script>
    data:{
        ok:true
    }
</script>

咱們更改 ok 的值，就能夠控制整組的元素了數組

v-else

你可使用 v-else 指令來表示 v-if 的「else 塊」：瀏覽器

<div v-if="ok">
    Now you see me
</div>
<div v-else>
    Now you don't
</div>

v-else 元素必須緊跟在 v-if 或者 v-else-if 元素的後面——不然它將不會被識別。ide

v-else-if

v-else-if，顧名思義，充當 v-if 的「else-if 塊」。能夠鏈式地使用屢次：this

<div>
    <p v-if="sc>=90">優秀</p>
    <p v-else-if="sc>=60">及格</p>
    <p v-else="sc<60">不及格</p>
</div>

相似於 v-else，v-else-if 必須緊跟在 v-if 或者 v-else-if 元素以後。spa

可複用元素

Vue 會盡量高效地渲染元素，一般會複用已有元素而不是從頭開始渲染。這麼作，除了使 Vue 變得很是快以外，還有一些有用的好處。例如，若是你容許用戶在不一樣的登陸方式之間切換:prototype

<div class="exp">
    <template v-if="loginType === 'username'">
        <label>Username</label>
        <input placeholder="Enter your username">
    </template>

    <template v-else>
        <label>Email</label>
        <input placeholder="Enter your email address">
    </template>
    <input type="button" @click="btn" value="切換"/>
</div>

<script>
    var exp=new Vue({
        el:".exp",
        data:{
            loginType:"username"
        },
        methods:{
            btn:function(){
                if(this.loginType==="username"){
                    this.loginType="email"
                }else{
                    this.loginType="username"
                }
            }
        }
    })
</script>

那麼在上面的代碼中切換 loginType 將不會清除用戶已經輸入的內容。由於兩個模板使用了相同的元素，< input > 不會被替換掉——僅僅是替換了它的 placeholder。code

複製上面的代碼，在本身的瀏覽器中試一試。component

有時候咱們不但願瀏覽器保留咱們輸入的內容，因此 Vue 爲你提供了一種方式來聲明「這兩個元素是徹底獨立的——不要複用它們」。只需添加一個具備惟一值的 key 屬性便可：

<template v-if="loginType === 'username'">
    <label>Username</label>
    <input placeholder="Enter your username" key="username">
</template>

<template v-else>
    <label>Email</label>
    <input placeholder="Enter your email address" key="email">
</template>

v-show

另外一個用於根據條件展現元素的選項是 v-show 指令。用法大體同樣：

<h1 v-show="ok">Hello!</h1>
<script>
    data:{
        ok:false
    }
</script>

不一樣的是帶有 v-show 的元素始終會被渲染並保留在 DOM 中。v-show 是簡單地切換元素的 CSS 屬性 display 。

渲染以下

<div style="display:none;"></div>

列表渲染

使用 v-for 把一個數組對應爲一組元素

咱們用 v-for 指令根據一組數組的選項列表進行渲染。 v-for 指令須要以 item in items 形式的特殊語法， items 是源數據數組而且 item 是數組元素迭代的別名。

<div class="exp">
    <ul>
        <li v-for="item in items">{{item.text}}</li>
    </ul>
</div>

<script>
    data:{
        items:[
            {text:"eat"},
            {text:"play"},
            {text:"game"}
        ]
    }
</script>

渲染結果

<div class="exp">
    <ul>
        <li>eat</li>
        <li>play</li>
        <li>game</li>
    </ul>
</div>

v-for 還支持一個可選的第二個參數爲當前項的索引。

<div class="exp">
    <ul>
        <li v-for="item,index in items">{{index}}-{{item.text}}</li>
    </ul>
</div>
<script>
    var exp=new Vue({
        el:".exp",
        data:{
            items:[
                {text:'eat'},
                {text:'paly'},
                {text:'game'}
            ]    
        }
    })
</script>

結果

0-eat
1-paly
2-game

一個對象的 v-for

你也能夠用 v-for 經過一個對象的屬性來迭代。

<div class="exp">
    <ul>
        <li v-for="value in obj">{{value}}</li>
    </ul>
</div>
<script>
    var exp=new Vue({
        el:".exp",
        data:{
            obj:{
                firstname:"PureView",
                lastname:"一個安靜的美男子",
                age:18
            }
        }
    })
</script>

結果

PureView
一個安靜的美男子
18

你一共能夠提供三個參數，第二個參數爲鍵名，第三個爲索引：

<li v-for="value,key,index in obj">{{index+1}}. {{key}}: {{value}}</li>

結果

1. firstname: PureView
2. lastname: 一個安靜的美男子
3. age: 18

數組更新檢測

變異方法

Vue 包含一組觀察數組的變異方法，因此它們也將會觸發視圖更新。這些方法以下：

  • push()

  • pop()

  • shift()

  • unshift()

  • splice()

  • sort()

  • reverse()

例如

<div class="exp">
    <ul>
        <li v-for="item in items">{{item.text}}</li>
    </ul>
</div>

<script>
    var exp=new Vue({
        el:".exp",
        data:{
            items:[
                {text:"eat"},
                {text:"play"},
                {text:"game"}
            ]
    }
    })
    exp.items.push({text:'watch TV'})
</script>

重塑數組

變異方法(mutation method)，顧名思義，會改變被這些方法調用的原始數組。相比之下，也有非變異(non-mutating method)方法，例如： filter(), concat() 和 slice() 。這些不會改變原始數組，但老是返回一個新數組。當使用非變異方法時，能夠用新數組替換舊數組：

data:{
    items:[
            {text:"eat"},
            {text:"play"},
            {text:"game"},
            {text:"gaming"},
            {text:"wot"},
            {text:"wows"},
            {text:"wt"}
        ]
    }
}
exp.items.slice(0,5)

利用上一節的例子,返回的值不會改變原數據，在控制檯打印咱們就能看到了。

注意事項

因爲 JavaScript 的限制， Vue 不能檢測如下變更的數組：

  • 當你利用索引直接設置一個項時，例如： vm.items[indexOfItem] = newValue

  • 當你修改數組的長度時，例如： vm.items.length = newLength

爲了解決第一類問題，如下兩種方式均可以實現和 vm.items[indexOfItem] = newValue 相同的效果， 同時也將觸發狀態更新：

// Vue.set
Vue.set(exp.items, indexOfItem, newValue)
// Array.prototype.splice
exp.items.splice(indexOfItem, 1, newValue)

爲了解決第二類問題，你可使用 splice：

exp.items.splice(newLength)

對象更新檢測

因爲現代JavaScript的限制，Vue沒法檢測屬性添加或刪除。 例如：

var exp=new Vue({
    data:{
        a:1
    }
})
vm.b=2 //模板內無響應

Vue是不容許動態地向已建立的實例添加新的根級屬性的。這時候 Vue 提供了一個方法用來對對象添加屬性：

Vue.set(object,key,value)

舉個例子

var exp=new Vue({
    el:".exp",
    data:{
        obj:{
            me:"pureview",
            pet1:"dog",
            pet2:"cat",
            hobby:"games"
        }  
    }
})

咱們在控制檯輸入下面的代碼，就能夠看到模板內的數據進行了更新

Vue.set(exp.obj,"todo","eating")

除了添加屬性，咱們也能夠進行刪除操做

Vue.delete(exp.obj,"pet2")

顯示過濾/排序結果

有時，咱們想要顯示一個數組的過濾或排序副本，而不實際改變或重置原始數據。在這種狀況下，能夠建立返回過濾或排序數組的計算屬性。

好比咱們在一個數組中取其偶數

<div class="exp">
    <ul>
        <li v-for="n in numbers">{{n}}</li>
    </ul>
</div>

<script>
    var exp=new Vue({
        el:".exp",
        data:{
            num:[1,2,3,4,5,6,7,8,9,10]
        },
        computed:{
            numbers:function(){
                return this.num.filter(function(num){
                    return num%2===0
                })
            }
        }
    })
</script>

模板顯示結果：

2
4
6
8
10

在計算屬性不適用的狀況下 (例如，在嵌套 v-for 循環中) 你可使用一個 method 方法：

<div class="exp">
    <ul>
        <li v-for="n in even(num)">{{n}}</li>
    </ul>
</div>

<script>
    var exp=new Vue({
        el:".exp",
        data:{
            num:[1,2,3,4,5,6,7,8,9,10]
        },
        methods:{
            even:function(num){
                return num.filter(function(num){
                    return num%2===0
                })
            }
        }
    })
</script>

結果是同樣的

一段取值範圍的 v-for

v-for 也能夠取整數。在這種狀況下，它將重複屢次模板。

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

結果

1 2 3 4 5 6 7 8 9 10

v-for 在 < template > 上

與模板v-if相似，您還可使用帶有 v-for 的< template >標籤來呈現多個元素的塊。

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>
</ul>

v-for 和 v-if

當 v-for 與 v-if 一塊兒使用時，v-for 具備比 v-if 更高的優先級，這意味着 v-if 將分別重複運行於每一個 v-for 循環中。當咱們僅爲某些項目渲染節點時，這可能頗有用：

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>

而若是咱們的目的是有條件地跳過循環的執行，那麼能夠將 v-if 置於外層元素 (或 < template >)上。如:

<ul v-if="todos.length">
  <li v-for="todo in todos">
    {{ todo }}
  </li>
</ul>
<p v-else>No todos left!</p>

組件的 v-for

在 Vue 的 2.2.0 以上的版本中，咱們要在組件中使用 v-for 時，必須使用 key

<my-component v-for="(item,index) in itmes" v-bind:key="index"></my-component>

雖然在自定義組件裏可使用 v-for ，可是，他不能自動傳遞數據到組件裏，由於組件有本身獨立的做用域。爲了傳遞迭代數據到組件裏，咱們要用 props ：

<my-component v-for="(item,index) in items" v-bind:key="index" :lie="item.text"></my-component>

<script>
    Vue.component('mycom', {
        template: "<p>{{this.lie}}</p>",
        props:["lie"]
    })
    var exp=new Vue({
        el:".exp",
        data:{
            items:[
                {text:'從前有座山'},
                {text:'山上有座廟'},
                {text:'廟裏有個老和尚'},
                {text:'正在玩王者榮耀'}
            ]
        }
    })
</script>

結果

從前有座山

山上有座廟

廟裏有個老和尚

正在玩王者榮耀

To be continue......

上一篇：Class 與 Style 綁定：https://segmentfault.com/a/11...
下一篇：Vue的事件處理方法：https://segmentfault.com/a/11...

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程