Vue.js中如何根据条件动态添加/移除带值的元素属性

要实现仅当!doesAllEventTypesHaveEventAttached为true时添加data-popover-target属性，条件为false时完全移除该属性，你可以利用Vue的特性：当属性绑定值为undefined时，Vue会自动从DOM中移除该属性。

直接修改按钮代码即可：

<button 
  :data-popover-target="!doesAllEventTypesHaveEventAttached ? 'all-event-type-not-satisfied' : undefined"
  data-popover-placement="left" 
  :disabled="!doesAllEventTypesHaveEventAttached" 
  type="button"
> 
  Send 
</button>

具体逻辑：

• 当!doesAllEventTypesHaveEventAttached为true时，属性值设为目标ID'all-event-type-not-satisfied'，正常渲染属性
• 当条件不成立时，属性值设为undefined，Vue会自动剔除data-popover-target属性，不会生成无效的悬垂ID

如果习惯用对象语法统一绑定属性，也可以这么写：

<button 
  v-bind="{
    'data-popover-target': !doesAllEventTypesHaveEventAttached ? 'all-event-type-not-satisfied' : undefined,
    'data-popover-placement': 'left',
    disabled: !doesAllEventTypesHaveEventAttached,
    type: 'button'
  }"
> 
  Send 
</button>

两种方式都能达到你想要的效果，避免出现无意义的属性值。

内容的提问来源于stack exchange，提问作者iniubong peter