使用Vue.js,如何避免在vue的methods内直接操作DOM,或者说如何更vue的操作DOM.

问题描述

问 题

刚接触vue.js,对其初步认识是用数据去驱动页面的显示,用起来还不错,还没接触其更强大的功能.
看下这段代码

我这个页面用了两个bootstrap的模态框,来新建和编辑数据.
projectBuffer是用来暂存模态框内表单数据的变量.
比如要编辑一个project的时候,我先把当前要编辑的project赋值给projectBuffer,projectBuffer已经与模态框内表单元素进行了绑定,vue能很方便的将原来的project数据加载进表单.
但是,我这里做了一个很不vue的操作,在vue的methods内直接操作了页面DOM元素(在这里是指:禁用表单的保存按钮及让模态框显示出来),虽然目的是达到了,但是这样写很丑.
理想的做法应该是用vue.data里面的数据改变去做上述的两件事情(禁用表单的保存按钮及让模态框显示出来).
不知各位有没有更好的想法.

解决方案

在data属性中定义一个属性比如isModify，true表示编辑，false表示新增，然后在DOM元素上用:style根据这个值动态绑定样式即可。

这篇关于使用Vue.js,如何避免在vue的methods内直接操作DOM,或者说如何更vue的操作DOM.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！