前端模板渲染插值语法加判断渲染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>

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

最后

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

猜你喜欢

转载自blog.csdn.net/m0_49714202/article/details/127818503