前端模板渲染插值语法加判断渲染v-if和v-else判断渲染

第1种

需求

接口里面数据有一条的话显示第一条里面的内容,
如果两条数据以上的话显示a标签。

接口

目前是一条数据,两条数据以上渲染a标签内容
在这里插入图片描述

解决

语法
<a v-if="条件">内容</ a>
<span v-else>{{data.item}}</span>
实例
<span class="__link">
      <span v-if="data.item.freight.length < 2">{{data.item.freight[0].delivery_method}}
      </span><span v-else><a>Multiple</a></span>
</span>

效果

在这里插入图片描述

第2种

条件渲染

显示true或者false;看接口data.flag返回的true还是false对对应页面显示true或者false

语法

<span >{{ data.flag? 'true' : 'false' }}</span>

实例

<span class="__link">{{ data.item.account ? 'true' : 'false' }}</span>

遇到新方法的还会来这里更新~~~

最后

感觉文章好的话记得点个心心和关注和收藏,有错的地方麻烦指正一下,如果需要转载,请标明出处,多谢!!!

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值