问如何在Vue.js中动态切换没有值的HTML属性？
EN

Stack Overflow用户

提问于 2021-08-06 10:44:11

回答 1查看 27关注 0票数 1

我希望它像这样渲染：

// normal
<div></div>
// when necessary, add a `data-locked` property without value to it
<div data-locked></div>

我尝试了<div :data-locked='conditionBoolean'></div>，但没有像我预期的那样工作(<div data-locked='true'></div>我不需要值true/false)。

为什么我需要这个？这是因为第三方CSS依赖项这样写道：

[data-locked] { display: none }

发布于 2021-08-06 11:16:16

你可以在这里使用v-bind

<div v-bind="dataAttrs"></div>

并定义一个computed属性

dataAttrs() {
  return this.conditionBoolean && { 'data-locked': '' }
}

尽管您可以在不使用data-locked的情况下使用v-show实现类似的行为

<div v-show="!conditionBoolean"></div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68680287

复制

相似问题

问如何在Vue.js中动态切换没有值的HTML属性？EN