vue.js获取input自定义属性的值

admin 2026年02月21日 23:01 105 0

在Vue.js中获取input自定义属性值，可通过两种常用方式实现：一是使用ref获取DOM元素后调用getAttribute()方法，如给input添加ref="inputRef"，通过this.$refs.inputRef.getAttribute('data-custom')获取；二是利用事件对象，在事件处理函数中通过e.target.dataset.custom访问（需属性名为data-前缀），若属性值需响应式绑定，可结合v-bind动态绑定，如v-bind:data-custom="customValue"，再通过事件对象或ref获取，注意避免直接操作DOM，优先考虑Vue的数据驱动特性。

Vue.js 中获取 input 自定义属性值的完整指南

在 Vue.js 开发中，我们经常需要处理表单元素（如 <input>）的额外数据，这些数据可能不属于标准的 HTML 属性（如 value、name、type 等），而是自定义的 data-* 属性，通过这些自定义属性，我们可以在输入框中存储用户 ID、字段标识符等元数据，以便在提交表单或触发事件时快速关联数据，本文将详细介绍在 Vue.js 中获取 <input> 自定义属性值的多种方法,并通过实际代码示例帮助大家理解。

自定义属性简介：什么是 `data-*` 属性？

data-* 属性是 HTML5 中引入的自定义数据属性，允许开发者在 HTML 元素上存储额外的私有数据，其命名规则必须以 data- 开头，后面可以跟任意字母、数字、连字符、点、冒号或下划线（但不能包含大写字母）。

<input type="text" data-user-id="1001" data-field-type="nickname" placeholder="请输入昵称">

这里 data-user-id 和 data-field-type 就是自定义属性，分别存储了用户 ID 和字段类型，在 Vue.js 中,我们可以通过多种方式获取这些属性的值。

获取 input 自定义属性值的常用方法

方法 1：通过原生 JavaScript 的 `getAttribute()` 方法

getAttribute() 是 DOM 元素的原生方法，用于获取指定属性的值，在 Vue.js 中，我们可以通过 ref 获取 DOM 元素,再调用该方法获取自定义属性值。

示例代码：

<template>
  <div>
    <input 
      type="text" 
      ref="myInput" 
      data-user-id="1001" 
      data-field-type="nickname" 
      placeholder="请输入昵称"
    >
    <button @click="getAttrByMethod1">获取自定义属性（getAttribute）</button>
    <p>用户ID：{{ userId }}</p>
    <p>字段类型：{{ fieldType }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userId: '',
      fieldType: ''
    }
  },
  methods: {
    getAttrByMethod1() {
      // 通过 ref 获取 input DOM 元素
      const inputEl = this.$refs.myInput;
      // 调用 getAttribute 获取自定义属性值
      this.userId = inputEl.getAttribute('data-user-id');
      this.fieldType = inputEl.getAttribute('data-field-type');
    }
  }
}
</script>

说明：

ref="myInput"：为 <input> 元素添加 ref 属性，允许在 Vue 实例中通过 this.$refs.myInput 访问该 DOM 元素。
getAttribute('data-user-id')：传入完整的属性名（包括 data- 前缀）,即可获取对应的属性值。

方法 2：通过 `dataset` 属性（推荐）

dataset 是 HTML5 提供的属性，专门用于读取 data-* 自定义属性，它返回一个 DOMStringMap 对象，data-* 属性名会自动转换为驼峰命名（去掉 data- 前缀，首字母小写）。data-user-id 对应 dataset.userId，data-field-type 对应 dataset.fieldType。

示例代码：

<template>
  <div>
    <input 
      type="text" 
      ref="myInput" 
      data-user-id="1001" 
      data-field-type="nickname" 
      placeholder="请输入昵称"
    >
    <button @click="getAttrByDataset">获取自定义属性（dataset）</button>
    <p>用户ID：{{ userId }}</p>
    <p>字段类型：{{ fieldType }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userId: '',
      fieldType: ''
    }
  },
  methods: {
    getAttrByDataset() {
      const inputEl = this.$refs.myInput;
      // 通过 dataset 直接获取驼峰命名的属性值
      this.userId = inputEl.dataset.userId;
      this.fieldType = inputEl.dataset.fieldType;
    }
  }
}
</script>

说明：

dataset 属性比 getAttribute() 更简洁，无需手动拼接 data- 前缀，是 Vue.js 中获取自定义属性的推荐方式。
如果自定义属性名包含连字符（如 data-user-info），则 dataset 中会转换为驼峰命名（dataset.userInfo）。

方法 3：通过事件对象获取（适用于事件触发场景）

在监听输入框事件（如 @input、@change、@click）时，可以通过事件对象的 target 属性获取触发事件的 DOM 元素,进而读取其自定义属性值。

示例代码：

<template>
  <div>
    <input 
      type="text" 
      data-user-id="1001" 
      data-field-type="nickname" 
      placeholder="请输入昵称"
      @input="handleInput"
    >
    <p>输入时获取的用户ID：{{ currentUserId }}</p>
    <p>输入时获取的字段类型：{{ currentFieldType }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentUserId: '',
      currentFieldType: ''
    }
  },
  methods: {
    handleInput(event) {
      // event.target 就是触发事件的 input 元素
      const inputEl = event.target;
      // 通过 dataset 获取自定义属性
      this.currentUserId = inputEl.dataset.userId;
      this.currentFieldType = inputEl.dataset.fieldType;
    }
  }
}
</script>

方法 4：在组件中使用自定义属性传递数据

在 Vue 组件中，我们可以利用自定义属性向子组件传递配置信息，然后通过 props 或直接访问 DOM 的方式获取这些属性值。

示例代码：

<template>
  <div>
    <custom-input 
      data-user-id="1001" 
      data-field-type="nickname"
      v-model="inputValue"
    ></custom-input>
    <p>输入值：{{ inputValue }}</p>
    <p>用户ID：{{ userId }}</p>
    <p>字段类型：{{ fieldType }}</p>
  </div>
</template>
<script>
import CustomInput from './CustomInput.vue';
export default {
  components: {
    CustomInput
  },
  data() {
    return {
      inputValue: '',
      userId: '',
      fieldType: ''
    }
  },
  mounted() {
    // 通过 querySelector 获取组件实例的 DOM 元素
    const customInputEl = this.$el.querySelector('custom-input');
    this.userId = customInputEl.dataset.userId;
    this.fieldType = customInputEl.dataset.fieldType;
  }
}
</script>

方法 5：使用自定义指令封装获取逻辑

对于频繁需要获取自定义属性的场景，我们可以创建一个自定义指令来封装获取逻辑,使代码更加简洁和可复用。

示例代码：

<template>
  <div>
    <input 
      type="text" 
      v-custom-attr="{ userId: '1001', fieldType: 'nickname' }"
      v-model="inputValue"
    >
    <p>用户ID：{{ userId }}</p>
    <p>字段类型：{{ fieldType }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      inputValue: '',
      userId: '',
      fieldType: ''
    }
  },
  directives: {
    customAttr: {
      inserted(el, binding) {
        // 将指令值存储在组件的数据属性中
        el.dataset.userId = binding.value.userId;
        el.dataset.fieldType = binding.value.fieldType;
        // 触发自定义事件，通知父组件属性已设置
        el.dispatchEvent(new CustomEvent('customAttrSet', {
          detail: {
            userId: binding.value.userId,
            fieldType

标签： #vue输入 #属性获取