Vue--条件与循环

目录

条件语句

v-if

v-else

v-else-if

v-show

循环语句

v-for迭代数组

v-for迭代对象 

v-for迭代对象数组

v-for迭代常量

v-for与v-if一同使用

条件语句

v-if

        v-if指令用于条件性渲染一块内容，改内容只会在指令的表达式返回为真值的时候被渲染

    <div id="exam">
        <p v-if="msg">显示</p>
    </div>
    <script>
        new Vue({
            el:'#exam',
            data:{
                msg:true
            }
        })
    </script>

        上例中，当属性msg为true时，页面会出现“显示”两个字，反之没有字出现。

        由于v-if是一个指令，故必须将其添加到一个元素上，若想要切换多个元素，可以将一个<template>元素当成不可见的包裹元素，在其上面使用v-if，最终的渲染结果不包含<template>元素

        <p v-if="msg">
            <h3>元素1</h3>
            <span>元素2</span>
            <p>元素3</p>
        </p>

v-else

        与if语句伴随的通常还有else语句，故对应v-if语句的还有v-else语句

        <p v-if="msg">显示</p>
        <p v-else>消失</p>

        需要注意的是v-else元素必须紧跟在带v-if或者v-else-if元素的后面，否则不会被识别，即无效

v-else-if

        v-else-if是2.1.0新增语句，其是充当v-if的“else-if”块，可以持续使用，例如：

        <p v-if="num === 0">0</p>
        <p v-else-if="num === 1">1</p>
        <p v-else-if="num === 2">2</p>
        <p v-else-if="num === 3">3</p>
        <p v-else>非0/1/2/3</p>

        v-else-if必须紧跟在v-if或者v-else-if元素之后，否则不会被识别

v-show

        v-show指令同样是根据条件展示元素

<p v-show="msg">显示</p>

        其使用方式与效果均与v-if指令相同，但不同点如下：

v-if指令与v-show指令区别

        1.v-if底层采用appendChild来实现，带有v-if的元素始终会被渲染并保留在DOM中；v-show只是简单的切换元素的display，通过样式的display控制标签的显示

        2.v-show不支持<template>元素，也不支持v-else和v-else-if

        3.v-if是真正的条件渲染，因为其会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建，v-if是惰性的，若在初始渲染时条件为假，则什么都不做直至条件第一次变为真，才会开始渲染条件块；v-show也是惰性的，但v-show不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行切换

        4.v-if有更高的切换开销，加载速度更快；v-show有更高的初始渲染开销，加载速度慢(若需要频繁切换，推荐使用v-show;若运行时条件很少改变，使用v-if较好)

循环语句

v-for迭代数组

        v-for指令可以基于一个数组来渲染一个列表，其使用语法如下：

●v-for指令：v-for="item in items"

        item：迭代数组元素

        items：源数据数组

●v-for块支持一个可选的第二个参数--当前的索引：

        v-for="(item,index) in items"

●使用时也可用of替代in作为分隔符，更接近JavaScript迭代器的语法

        v-for="item of items"

● 可以在<template>上使用v-for

        示例：

    <div id="exam">
        <!-- v-for指令遍历数组 -->
        <ul>
            <li v-for="item in arr">
                {{ item }}
            </li>
        </ul>
        <!-- v-for指令遍历数组元素及每个元素的索引 -->
        <ul>
            <li v-for="(item,index) in arr">
                {{ index }} -- {{ item }}
            </li>
        </ul> 
    </div>
    <script>
        new Vue({
            el:'#exam',
            data:{
                arr:['元素1','元素2','元素3']
            }
        })
    </script>

        实现效果：

v-for迭代对象 

        v-for还可用来遍历对象，通过一个对象的属性来迭代数据：

● v-for遍历对象：v-for="value in object"

● v-for遍历对象属性属性名、索引：v-for="(key,index) in object"

        示例：

    <div id="exam"> 
        <!-- v-for指令遍历对象 -->
         <ul>
            <li v-for="item in obj">
                {{ item }}
            </li>
        </ul>
        <!-- v-for指令遍历对象属性名、属性的索引 -->
        <ul>
            <li v-for="(item,key,index) in obj">
                {{ key }} : {{ item }} -- {{ index }}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el:'#exam',
            data:{
                obj:{
                    name:'张三',
                    gender:'男',
                    old:20
                }
            }
        })
    </script>

        实现效果：

v-for迭代对象数组

        迭代对象数组即是综合上面两种方式：

    <div id="exam">
        <!-- v-for指令遍历对象数组 -->
        <ul>
            <li v-for="item in objArr">
                {{ item.name }} 
                {{ item.gender }}
                {{ item.old }}
                {{ item }}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el:'#exam',
            data:{
                objArr:[
                    { name:'张三', gender:'男',old:20 },
                    { name:'李四', gender:'女',old:18 },
                    { name:'王五', gender:'男',old:22 }
                ]
            }
        })
    </script>

        实现效果：

v-for迭代常量

        v-for也可接受整数，在该情况下，它会将模板重复对应次数:

    <div id="exam">
        <!-- v-for指令遍历常量 -->
        <ul>
            <li v-for="item in 5">
                {{ item }}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el:'#exam'
        })
    </script>

        实现效果：

v-for与v-if一同使用

        一般不推荐在同一元素上使用v-if和v-for，当它们处于同一节点，v-for优先级比v-if更高，意味着v-if将分别重复运行于v-for循环

<li v-for="item in items" v-if="!item.isCpmplete">
    {{ item }}
</li>

        上述代码只渲染未完成的item，若我们希望只对部分项渲染节点，这种优先级是机制可以派上用场。若我们的目的是有条件的跳过循环的执行，可以将v-if放在外层元素上，如下：

        <ul v-if="items.length">
            <li v-for="item in items">
                {{ item }}
            </li>
        </ul>
        <span v-else>items没有数据</span>