JS搜索formatResult方法中实现0价不展示的条件判断写法咨询

条件判断逻辑直接写在formatResult方法内原本渲染价格区块的位置即可，替换原来固定渲染价格的代码，不同技术栈的实现写法如下：

原生JS/字符串拼接渲染 #

function formatResult(e) {
  let itemHtml = `
    <div class="search-suggest-item">
      <p class="item-title">${e.title}</p>
  `
  // 仅价格大于0时拼接价格区块的HTML
  if (Number(e.price) > 0) {
    itemHtml += `<p class="item-price">¥${e.price}</p>`
  }
  itemHtml += `
      <p class="item-shop">${e.shopName}</p>
    </div>
  `
  return itemHtml
}

React/JSX语法 #

const formatResult = (e) => {
  return (
    <div className="search-suggest-item">
      <p className="item-title">{e.title}</p>
      {/* 条件渲染价格区块 */}
      {Number(e.price) > 0 && <p className="item-price">¥{e.price}</p>}
      <p className="item-shop">{e.shopName}</p>
    </div>
  )
}

Vue模板语法 #

如果formatResult返回的是Vue模板片段，用v-if指令控制即可：

<template>
  <div class="search-suggest-item">
    <p class="item-title">{{ e.title }}</p>
    <p class="item-price" v-if="Number(e.price) > 0">¥{{ e.price }}</p>
    <p class="item-shop">{{ e.shopName }}</p>
  </div>
</template>

注意事项 #

• 建议先把e.price转成数字再判断，避免后端返回字符串类型的'0'导致判断失效
• 用> 0而不是!= 0做判断，可以避免负价格的异常场景下展示不合理的价格

内容的提问来源于stack exchange，提问作者Revol Begins