如何在Vue中添加/删除数据参数的条件？

Question

e.g ：

<div :data-some="someData ? okay : bad" 
     :data-someother="someOtherData ? okay : bad">
</div>

如果结果中存在“不良”，我不想指定任何data-params。

我该怎么做？

Answer 1

您可以将属性组合为计算属性中的对象：

computed: {
  attributes() {
    let attributes = {};
    if (this.someData) {
      attributes['data-some'] = this.someData;
    }
    if (this.someOtherData) {
      attributes['data-someother'] = this.someOtherData;
    }
    return attributes;
  }
}

然后通过将对象传递给v-bind指令将这些属性绑定到div：

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

这样，如果data-param的数据不存在，那么data-param属性将不会被添加到attributes对象，也不会绑定到div。