vue -- 条件判断语句

来源:博客园分类: 文章浏览史发布时间:2020-08-09 15:19:02 最后更新:2020-08-09 浏览:3916

转载声明：

本文为摘录自“博客园”，版权归原作者所有。

原文链接:

温馨提示：

为了更好的体验，请点击原文链接进行浏览

摘录时间：

2020-08-09 15:19:02

vue条件判断语句跟js条件判断一样
HTML

<div id="app">
    <div v-if="block">block为true显示</div>
    <div v-else>block为false显示</div>
</div>

let app = new Vue({
    el: "#app",
    data: {
        block: true
    }
})

v-if
v-else-fi
v-else
也可以同JS一样写表达式

<div id="app">
    <div v-if="block===true">block为true显示</div>
    <div v-else>block为false显示</div>
</div>

也可以写三元表达式

<div id="app">
    <div v-if="block===1 ? true : false ">block为true显示</div>
    <div v-else>block为false显示</div>
</div>

二、条件渲染

根据条件判断语句，我们可以进行条件渲染我们想要的数据

<div v-if="isShow === true">
    <div>展示想要的</div>
</div>
<div v-else>
    <div>展示不想要的</div>
</div>