Vue--条件与循环

张0x0

已于 2022-03-23 20:26:38 修改

阅读量1.3k

点赞数

分类专栏： web前端基础学习 vue学习文章标签：前端 vue

于 2022-03-16 23:52:31 首次发布

本文链接：https://blog.csdn.net/zxn200125/article/details/123539811

版权

本文详细介绍了Vue中的条件语句和循环语句。条件语句包括v-if、v-else、v-else-if和v-show，它们用于条件性渲染内容。v-if基于表达式进行条件判断，v-show则通过改变元素的display样式实现。循环语句v-for用于遍历数组、对象和对象数组，还支持迭代常量。同时，文章提到了v-for与v-if的使用注意事项和优先级问题。

摘要由CSDN通过智能技术生成

条件语句

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>