vue怎么获取标签

可在 vue 中获取标签的方法有：使用 ref 属性（获取 dom 元素）、使用 queryselector（在根元素中查找）、使用 document.getelementbyid（依据 id 获取）、使用 element 库的 $ 方法（无需 id）以及遍历 dom 节点。

如何在 Vue 中获取标签

在 Vue 中获取标签有以下几种方法：

1. 使用 ref 属性

给标签添加一个 ref 属性，可以获取标签的 DOM 元素。

<template><p ref="myDiv">
    ...
  </p>
</template><script>
export default {
  mounted() {
    const myDiv = this.$refs.myDiv;
  }
}
</script>

登录后复制

2. 使用 querySelector

使用 querySelector 方法可以在组件的根元素中查找标签。

<template><p id="app">
    ...
  </p>
</template><script>
export default {
  mounted() {
    const myDiv = document.querySelector('#app p');
  }
}
</script>

登录后复制

3. 使用 document.getElementById

使用 document.getElementById 方法可以基于 ID 获取标签。

<template><p id="myDiv">
    ...
  </p>
</template><script>
export default {
  mounted() {
    const myDiv = document.getElementById('myDiv');
  }
}
</script>

登录后复制

4. 使用 Element 库的 $ 方法

如果不确定标签的 ID，可以使用 Element 库的 $ 方法获取标签。

<template><p class="my-p">
    ...
  </p>
</template><script>
import { $ } from 'element-ui';

export default {
  mounted() {
    const myDiv = $('my-p');
  }
}
</script>

登录后复制

5. 遍历 DOM 节点

可以使用 document.documentElement.childNodes 和 Element.childNodes 属性遍历 DOM 节点，找到目标标签。

<template><p>
    ...
  </p>
</template><script>
export default {
  mounted() {
    const myDiv = findElement((node) => node.tagName === 'DIV', document.documentElement);
  }
}

function findElement(predicate, node) {
  if (predicate(node)) {
    return node;
  }

  for (let i = 0; i < node.childNodes.length; i++) {
    const found = findElement(predicate, node.childNodes[i]);
    if (found) {
      return found;
    }
  }

  return null;
}
</script>

登录后复制

以上就是vue怎么获取标签的详细内容，更多请关注叮当号网其它相关文章！