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

在使用VUE时，不能直接对节点直接进行操作，所以可能大家需要操作dom获取节点或者通过mounted来对节点进行操作，那么鹏仔给大家带来下面两个方法讲解第一种：通过选择器来获取template中代码<template> <div> <canvas id='top' > </div> </template>js代码<script> export defaul 0 Comments

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


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

template中代码

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

js代码

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


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


第二种：使用ref获取

template中代码

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

js代码

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


本文链接：https://my.lmcjl.com/post/20980.html

展开阅读全文

相关文章

4 评论

留下您的评论.