vue.js如何操作dom-木庄网络博客

2022-03-22 00:56:56 PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者coldplay.xixi，侵删。

vue.js操作dom的方法：1、原生js操作dom，代码为【const dom = getElementById(‘box')】；2、使用vue官方方法ref，代码为【< div class=“set” ref=“up”>】。

本教程操作环境：windows7系统、Vue2.9.6版，DELL G3电脑，该方法适用于所有品牌电脑。

【相关文章推荐：vue.js】

vue.js操作dom的方法：

1、原生js操作dom

1	`const` `dom = getElementById(‘box')`

2、vue官方方法：ref

vue中的ref是把当前dom元素 “ 抽离出来 ” ，只要通过 this.$refs就可以获取到

1	`< div` `class=“set” ref=“up”>`

.set是我们要操作的dom对象，它的ref是 up

1	`@click=“Alert”`

给父元素一个点击事件，

接下来我们来编写这个方法

methods:{
? this.$refs.addAlert.style.display = “block”;
}

CSS还要吗？

相关阅读 >>

更多相关阅读请进入《vue.js》频道 >>

书籍

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者