Question

我正在尝试实现代码中提供的条件。我最后一次尝试就像在代码中那样。

  <ul class = "details" v-for = "(value, propertyName) in items[this.index]" :key = "value.id">
    <li v-if="{{propertyName}} == 'IndustryIdentifiers'">Data not available</li>
    <li v-else>{{value}}</li>
 </ul>

如何实施以下内容： v-if =“ {{propertyName}} =='IndustryIdentifiers'”

Answer 1

{{ }}语法用于包装应作为文本输出的JavaScript表达式。在其他上下文中，不必使用花括号来访问数据。对于v-if而言，属性值已经是一个表达式，无需包含任何特殊字符即可提取数据值。

所以只是v-if="propertyName === 'IndustryIdentifiers'"：

<ul class="details" v-for="(value, propertyName) in items[this.index]" :key = "value.id">
    <li v-if="propertyName === 'IndustryIdentifiers'">Data not available</li>
    <li v-else>{{ value }}</li>
</ul>

这里我假设item[this.index]是一个对象而不是数组，这是您编写循环的方式所隐含的。

您也可以这样写：

<ul class="details" v-for="(value, propertyName) in items[this.index]" :key = "value.id">
    <li>{{ propertyName === 'IndustryIdentifiers' ? 'Data not available' : value }}</li>
</ul>

您还应该能够从this.中删除index，除非它也在本地声明。

我还想知道您是否有意为每个值创建一个单独的列表，而每个列表仅包含一个项目。很难确切地知道您要实现的目标，但是我想您想在<ul>而不是<ul>内循环。如果只有一个<li>（如我的第二个示例），则可以将v-for移到<li>上。如果您要坚持使用两个<li> / v-if的{{1}}元素，则需要将它们包装在v-else标记中以容纳<template>

如何基于vue.js中提供的条件（v-if）渲染v-for的值

1 个答案: