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

目录

第1种

需求

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

接口

目前是一条数据,两条数据以上渲染a标签内容

解决

语法

erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

<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>

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

最后

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