ref 的巧妙使用 ---关于在vue中操作dom的问题 1

最新推荐文章于 2023-06-05 11:20:38 发布

chituo2005

最新推荐文章于 2023-06-05 11:20:38 发布

阅读量247

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/3520255/blog/3025334

博客指出使用Vue时一般不操作DOM，但某些情况需操作。介绍可使用ref绑定到div，通过this.$refs获取Vue中所有引用，并给出示例，还给出了转载来源。

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

我们虽然使用vue的时候是不会去操作它的dom的。但是有些情况下我们也不得不这么做，那么我们应该如何处理这种情况呢？我们使用 ref 去绑定到 div中，之后我们通过 this.$refs (获取到 vue中所有的引用) 下面是一个例子：

html:
<div id="app">
        <div 
            ref='hello' 
            @click="handleClick"
        >
            hello world
        </div>
    </div>
	
js:

// 在Vue中如何操作 dom 呢？
        // ref
        var vm = new Vue({
            el: "#app",
            methods: {
                handleClick: function(){
                    // vue 中所有的引用 this.$refs.hello
                    // 通过获取到 dom 节点 我们就可以去获取它的内容
                    console.log(this.$refs.hello.innerHTML);
                }
            }
        })

转载于:https://my.oschina.net/u/3520255/blog/3025334