vue中获取节点的两种方法，vue组件中通过mounted和操作dom获取节点操作的方法

在使用VUE时，不能直接对节点直接进行操作，所以可能大家需要操作dom获取节点或者通过mounted来对节点进行操作，那么鹏仔给大家带来下面两个方法讲解

第一种：通过选择器来获取

template中代码

Markup

<template>
  <div>
    <canvas id='top' >
  </div>
</template>

js代码

JavaScript

<script>
    export default{
        mounted(){
            let top = document.querySelector("#top");
        }
    }
</script>

之前，我们使用document.getElementById来获取id，在VUE中，我们需要使用 document.querySelector 来获取。

第二种：使用ref获取

template中代码

Markup

<template>
  <div>
    <canvas ref='top' >
  </div>
</template>

js代码

JavaScript

<script>
    export default{
        mounted(){
           let canvas=this.$refs.top;
        }
    }
</script>

分享

分享海报

扫一扫 - 分享本文

打赏

微信

扫一扫 - 打赏鹏仔

收藏

请按下 Ctrl + D

即可收藏当前文章

手机看

分享到微信朋友圈

扫一扫 - 手机阅读

侵权投诉

侵权、举报、建议

↓