vue.js 获取某一dom元素的属性值

admin 2026年02月25日 19:10 108 0

在Vue.js中，可通过ref绑定获取DOM元素属性值，首先在模板元素上添加ref="自定义名称"属性，再在组件逻辑中通过this.$refs.自定义名称获取DOM元素实例，获取属性时，原生属性可直接访问（如element.id、element.className），自定义属性则使用element.getAttribute('属性名')，需注意操作需在DOM渲染完成后执行，通常在mounted生命周期钩子中进行，获取data-info属性：const value = this.$refs.myElement.getAttribute('data-info')。

Vue.js 获取 DOM 元素属性值的实用指南

在 Vue.js 开发中，虽然核心思想是"数据驱动视图"，尽量避免直接操作 DOM，但在某些特定场景下，获取 DOM 元素的属性值仍然必不可少，本文将全面介绍在 Vue.js 中获取 DOM 元素属性值的多种方法，涵盖 Vue 2 和 Vue 3 的不同实现方式，并提供丰富的示例代码和实用技巧。

为什么需要获取 DOM 元素属性值？

在日常开发中,获取 DOM 属性值的应用场景十分广泛：

表单数据处理：获取表单元素的 value 属性值（如输入框内容、下拉框选中项等）
自定义属性读取：读取元素的 data-* 自定义属性（如 data-id、data-status、data-component 等）
元素状态检查：检查元素的 class、style、disabled、checked 等状态属性
第三方库集成：与基于 DOM 的第三方库（如 Swiper、ECharts、D3.js）交互时获取元素配置信息
动态样式调整：根据元素的实际尺寸、位置等属性进行动态样式计算
DOM 事件处理：在事件处理函数中获取触发事件的元素属性

虽然 Vue.js 提供了强大的数据绑定机制简化了大部分 DOM 操作，但在处理复杂交互、与原生 DOM API 集成或获取 Vue 无法自动追踪的属性时，直接访问 DOM 仍是必要的补充手段。

Vue 2 中获取 DOM 元素属性值的方法

在 Vue 2 中，最推荐的方式是通过 ref 属性结合 $refs 访问 DOM 元素。ref 是 Vue 提供的特殊属性，用于在 DOM 元素或子组件上注册引用，注册后可通过 this.$refs 访问对应的元素或组件实例。

使用 `ref` + `$refs` 获取元素属性值

基本步骤

在模板中为目标 DOM 元素添加 ref 属性，自定义引用名称（如 myRef）
在组件逻辑中,通过 this.$refs.myRef 访问该 DOM 元素
通过原生 DOM API（如 getAttribute()、直接访问属性）获取目标属性值

示例代码

<template>
  <div>
    <!-- 为 div 添加 ref 引用，并设置自定义属性 data-info -->
    <div 
      ref="myDiv" 
      data-info="这是自定义属性" 
      data-component="header"
      class="example"
    >
      点击按钮获取属性值
    </div>
    <button @click="getAttributeValue">获取属性值</button>
    <p>获取结果：{{ result }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      result: ""
    };
  },
  methods: {
    getAttributeValue() {
      // 通过 $refs 访问 DOM 元素
      const domElement = this.$refs.myDiv;
      // 方法1：使用 getAttribute() 获取任意属性
      const dataInfo = domElement.getAttribute("data-info");
      // 方法2：直接访问标准属性
      const className = domElement.className;
      // 方法3：访问 dataset 获取 data-* 属性（推荐）
      const infoFromDataset = domElement.dataset.info;
      const componentFromDataset = domElement.dataset.component;
      // 方法4：获取计算样式
      const computedStyle = window.getComputedStyle(domElement);
      const bgColor = computedStyle.backgroundColor;
      this.result = `
        data-info: ${dataInfo}, 
        class: ${className}, 
        dataset.info: ${infoFromDataset},
        dataset.component: ${componentFromDataset},
        background-color: ${bgColor}
      `;
    }
  }
};
</script>
<style>
.example {
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 15px;
  background-color: #f9f9f9;
}
</style>

关键说明

getAttribute()：可获取任意属性（包括自定义属性），返回字符串类型
直接访问属性：适用于标准 HTML 属性，但注意 data-* 属性需通过 dataset 访问（如 domElement.dataset.info）
ref 的访问时机：必须在 DOM 渲染完成后（如 mounted 生命周期或事件回调中）才能通过 this.$refs 访问，否则会返回 undefined
批量元素访问：ref 应用于 v-for 循环的元素，this.$refs 将返回一个数组

获取表单元素的值（特殊场景）

表单元素（如 input、select、textarea）的值通常通过 v-model 双向绑定获取，但若需直接通过 DOM 获取，仍可使用 $refs：

<template>
  <div>
    <input ref="myInput" placeholder="输入内容" />
    <button @click="getInputValue">获取输入值</button>
    <p>输入值：{{ inputValue }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      inputValue: ""
    };
  },
  methods: {
    getInputValue() {
      // 通过 value 属性获取输入框的值
      this.inputValue = this.$refs.myInput.value;
      // 也可以获取其他属性
      const placeholder = this.$refs.myInput.placeholder;
      const maxLength = this.$refs.myInput.maxLength;
      console.log('Placeholder:', placeholder, 'MaxLength:', maxLength);
    }
  }
};
</script>

Vue 3 中获取 DOM 元素属性值的方法

Vue 3 引入了 Composition API，获取 DOM 元素的方式从 this.$refs 变为使用 ref 函数和 template ref，核心逻辑与 Vue 2 一致，但语法更灵活且类型安全。

使用 Composition API + `template ref`

基本步骤

在模板中为 DOM 元素添加 ref 属性（如 myRef）
在 setup() 函数中，通过 ref() 创建一个响应式引用（如 const myRef = ref(null)）
将模板中的 ref 与 setup 中的 ref 绑定（ref="myRef"）
通过 myRef.value 访问 DOM 元素，并获取属性值

示例代码

<template>
  <div>
    <!-- 添加 ref 引用，绑定到 setup 中的 myRef -->
    <div 
      ref="myRef"
      data-info="Vue 3 示例"
      data-role="navigation"
      class="example"
    >
      点击按钮获取属性值
    </div>
    <button @click="getAttributeValue">获取属性值</button>
    <p>获取结果：{{ result }}</p>
  </div>
</template>
<script>
import { ref } from 'vue';
export default {
  setup() {
    const myRef = ref(null);
    const result = ref("");
    const getAttributeValue = () => {
      // 通过 myRef.value 访问 DOM 元素
      const domElement = myRef.value;
      if (!domElement) {
        result.value = "元素未找到";
        return;
      }
      // 获取各种属性
      const dataInfo = domElement.getAttribute("data-info");
      const dataRole = domElement.dataset.role;
      const className = domElement.className;
      // 获取尺寸信息
      const rect = domElement.getBoundingClientRect();
      const width = rect.width;
      const height = rect.height;
      result.value = `
        data-info: ${dataInfo},
        dataset.role: ${dataRole},
        class: ${className},

标签： #vue dom #属性获取