v-if 语句比较一个参数，如果匹配返回 Vue js 上同一对象内的另一个参数

Posted 2023-02-23

【中文标题】v-if 语句比较一个参数，如果匹配返回 Vue js 上同一对象内的另一个参数

【英文标题】：v-if statement to compare one parameter and if matches return another parameter within the same object on Vue js

【发布时间】：2021-01-27 00:51:13

【问题描述】：

什么是 v-if，我可以使用它在 json 文件的对象中查找匹配的标题并在找到标题时检索对象内容。

这是我正在使用的示例 json 文件：

  "data": [
    
      "image_path": "static/products/T130-SHEET-COLLECTION.jpg",
      "title": "Productivity Tools",
      "title_color": "badge-warning",
      "heading": "T130 Sheet Collection",
      "read_more_url": "javascript:void(0);",
      "content": "blanket posuere proin blandit accumsan senectus netus nullam curae, ornare laoreet adipiscing luctus mauris adipiscing pretium eget fermentum, tristique lobortis est ut metus lobortis tortor.",
      "vendor": "George Courey",
      "space": "Bedding",
      "category": "Linen"
    ,
    
      "image_path": "static/products/PRESTIGE-PLUS-T180-SHEET-COLLECTION.jpg",
      "title": "Productivity Tools",
      "title_color": "badge-warning",
      "heading": "Prestige Plus T180 Sheet Collection",
      "read_more_url": "javascript:void(0);",
      "content": "blanket posuere proin blandit accumsan senectus netus nullam curae, ornare laoreet adipiscing luctus mauris adipiscing pretium eget fermentum, tristique lobortis est ut metus lobortis tortor.",
      "vendor": "George Courey",
      "space": "Bedding",
      "category": "Linen"
    
  ]

【参考方案1】：

v-if in v-for:

<div v-for="item of data">
    <div v-if="item.title === 'condition'">
         item.title 
    </div>
</div>

【参考方案2】：

目前尚不清楚您的病情。 IE。您是匹配重复项还是匹配其他值。

无论哪种方式，我都建议您使用computed 而不是依赖v-if。这有很多好处，例如模板和逻辑更清晰的分离，更容易阅读调试，更容易在 js 中编写过滤逻辑。