vue中操作DOM元素

最新推荐文章于 2025-06-12 22:25:10 发布

weixin_436278061

最新推荐文章于 2025-06-12 22:25:10 发布

阅读量983

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/weixin_43627806/article/details/89882920

Vue 专栏收录该内容

13 篇文章

订阅专栏

博客介绍了Vue操作DOM的方法，即想操作DOM时，需给元素添加属性ref，再通过$refs方式获取该DOM元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看下面的这一串很简单代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

</head>
<body>
   <div id="app">
    <input type="text" ref ="input" value="真是尴尬">
    <button @click="headleClick" ref = "button">
      点击
    </button>
   </div>
  <script src="./vue.js"></script>

  <script>
  new Vue({
    el:"#app",
    data:{

    },
    methods:{
      headleClick() {
        console.log(this.$refs.input.value)
        console.log(this.$refs.button)
      }
    }
  })
  </script>
</body>
</html>

通过上面的代码，便可知vue如果想操作DOM的时候需要给该元素添加一个属性 ref 然后通过 $refs的方式来获取该DOM元素