vue——v-if、v-else用法

本文介绍了Vue.js中的v-if和v-else指令,它们用于根据条件决定元素是否渲染。当v-if为真时,显示相应内容,如‘三仟’;若为假,则显示v-else的内容,如‘墨染’。通过这样的条件渲染,可以灵活控制页面展示。示例代码展示了如何根据变量str的值来切换显示内容。
摘要由CSDN通过智能技术生成

当v-if为true的时候当前节点存在且显示;为false时,删除当前节点;v-else则是在v-if不存在且不显示时显示存在出来。

这样我们就可以利用这个特性做一些东西了

<div id="app">
    <div v-if="str>0">三仟</div>
    <div v-else>墨染</div>
</div>
new Vue({
    el:'#app',
    data:{
        str:1
    }
)}

这种情况下,就是会显示“三仟”,如果此时str等于0或者是负值,那页面中则会显示“墨染”。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值