vue -- 条件判断语句

来源:博客园 分类: 文章浏览史 发布时间:2020-08-09 15:19:02 最后更新:2020-08-09 浏览:156
转载声明:
本文为摘录自“博客园”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
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>

JS

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>
php技术微信