如何在Vue.js中动态设置div的data-*属性并忽略空值？

方法一：单个属性绑定（适合少量属性） #

直接在模板中指定data-*的kebab-case格式属性名，通过计算属性控制属性值——当值为null或空字符串时，Vue会自动忽略该属性，不会渲染到DOM上。

修改后的完整代码：

<template>
  <div class="content">
    <div
      :data-country="dataCountry"
      :data-applicant-firstname="dataApplicantFirstname"
      :data-applicant-lastname="dataApplicantLastname"
    ></div>
  </div>
</template>

<script>
export default {
  name: "ExampleComponent",
  data() {
    return {
      country: "ukraine",
      firstname: "Doe",
      lastname: "Joe"
    };
  },
  computed: {
    dataCountry() {
      // 空值或null时返回null，属性会被自动忽略
      return this.country?.trim() || null;
    },
    dataApplicantFirstname() {
      return this.firstname?.trim() || null;
    },
    dataApplicantLastname() {
      return this.lastname?.trim() || null;
    }
  }
};
</script>

方法二：对象批量绑定（适合多属性场景） #

如果需要绑定的data-*属性较多，推荐用计算属性生成包含所有有效属性的对象，再通过v-bind一次性绑定，代码更简洁。

方式1：手动映射属性名 #

<template>
  <div class="content">
    <!-- 一次性绑定所有有效data属性 -->
    <div v-bind="dynamicDataAttrs"></div>
  </div>
</template>

<script>
export default {
  name: "ExampleComponent",
  data() {
    return {
      country: "ukraine",
      firstname: "Doe",
      lastname: "Joe"
    };
  },
  computed: {
    dynamicDataAttrs() {
      const attrs = {};
      // 定义变量与data属性名的映射关系
      const attrMappings = {
        country: "data-country",
        firstname: "data-applicant-firstname",
        lastname: "data-applicant-lastname"
      };

      Object.entries(attrMappings).forEach(([dataKey, attrName]) => {
        const value = this[dataKey]?.trim();
        // 仅保留非空值的属性
        if (value) attrs[attrName] = value;
      });

      return attrs;
    }
  }
};
</script>

方式2：自动驼峰转kebab-case #

如果想从驼峰命名的变量自动生成data-*属性名，可以添加一个简单的转换函数：

<template>
  <div class="content">
    <div v-bind="dynamicDataAttrs"></div>
  </div>
</template>

<script>
export default {
  name: "ExampleComponent",
  data() {
    return {
      country: "ukraine",
      firstname: "Doe",
      lastname: "Joe"
    };
  },
  computed: {
    dynamicDataAttrs() {
      const attrs = {};
      // 定义变量与属性前缀后部分的映射（驼峰格式）
      const fieldMappings = {
        country: "country",
        firstname: "applicantFirstname",
        lastname: "applicantLastname"
      };

      // 驼峰转kebab-case工具函数
      const camelToKebab = (str) => str.replace(/([A-Z])/g, "-$1").toLowerCase();

      Object.entries(fieldMappings).forEach(([dataKey, camelAttr]) => {
        const value = this[dataKey]?.trim();
        if (value) {
          const attrName = `data-${camelToKebab(camelAttr)}`;
          attrs[attrName] = value;
        }
      });

      return attrs;
    }
  }
};
</script>

核心注意事项 #

• Vue会自动忽略值为null或undefined的绑定属性，无需额外判断。
• 动态属性名如果是字符串，直接写:[属性名]即可；如果用变量存储属性名，变量值必须是属性名字符串（比如const attrName = 'data-country'，再用: [attrName] = "value"）。

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