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 更高的优先级。