Vue分支循環結構

分支循環結構在編程中的地位不言而喻了，Vue也內置了分支循環的指令來使Vue編程變得簡單而有趣

一、分支
v-if
v-else
v-else-if
v-show
例如根據分數判斷是優秀，良好，一般還是差
將分支在dom元素中表現出來，最後渲染到頁面的只有符合判斷條件的dom

<div class="app">

        <div v-if='msg>=90'>{{msg}}優秀</div>
        <div v-else-if='msg<90&&msg>=80'>{{msg}}良好</div>
        <div v-else-if='msg<80&&msg>=60'>{{msg}}一般</div>
        <div v-else>{{msg}}差</div>
        
    </div>


    <script>
        var vm=new Vue({
            el:'.app',
            data:{
                msg:39,
            }
        });
    </script>

v-show
v-show是控制dom顯示與隱藏的指令，底層原理就是display是none還是block。

<div class="app">
        <div v-show='true'>測試v-show顯示</div>
        <div v-show='false'>測試v-show隱藏</div>
    </div>


    <script>
        var vm=new Vue({
            el:'.app',
        });
    </script>

v-if 使用場景
多個元素 通過條件判斷展示或者隱藏某個元素。或者多個元素
v-show 和 v-if 區別
v-show本質就是標籤display設置爲none，控制隱藏
v-if是動態的向DOM樹內添加或者刪除DOM元素

二、循環
v-for是Vue中使用循環的指令
v-for遍歷數組

<div class="app">
        <ul>
            <li :key='item.id' v-for='(item,index) in fruits'>{{item}}-----{{index}}</li>
        </ul>
    </div>


    <script>
        var vm=new Vue({
            el:'.app',
            data:{
                fruits:['apple','orange','banana']
            }
        });
    </script>

key的作用
key來給每個節點做一個唯一標識
key的作用主要是爲了高效的更新虛擬DOM

v-for遍歷對象

<div class="app">
        <div v-for='(value,key,index) in obj'>{{value+'---'+key+'---'+index}}</div>
    </div>


    <script>
        var vm=new Vue({
            el:'.app',
            data:{
                obj:{
                    name:'lisi',
                    age:15,
                    sex:'male'
                }
            }
        });
    </script>

v-for = “(item,key,index) in 對象名”
Item 代表對象中的每一項
Key 代表對應的鍵名
Index 代表對應的 索引

v-if 和 v-for 搭配使用
當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優先級。