如何在vue 3中有条件地设置data-attribute?

xxls0lw8  于 2023-05-18  发布在  Vue.js
关注(0)|答案(1)|浏览(188)

我正在尝试,这取决于我的循环索引是否为0,在h2标记上设置一个data-attribute。我想要的是,如果索引是0,它应该呈现为data-title="main"。我该怎么做?现在它根本不呈现数据属性。
验证码:
(项目是一个已经解析的JSON,没有,错误)

<figure v-for="(project, index) in projects" :key="project.id">
    <figcaption>
      <span>
        {{ project.subtitle }}
      </span>
      <h2 :data-title="{'main': index == 0}">
        {{ project.title }}
      </h2>
    </figcaption>
  </figure>
kknvjkwl

kknvjkwl1#

不像样式属性需要对象

<div :style="{ display: index == 0 ? "block" : undefined }" />

大多数其他属性具有其他值类型
在你的例子中,它是string

<div :data-title="index == 0 ? 'main' : 'otherwise'" />

传递undefinednull,使Vue完全删除属性。

<div :data-title="index == 0 ? 'main' : undefined " />

相关问题