ref修改dom样式遇到的问题

给页面的某个子节点添加ref = "tips",在方法中修改它的样式

this.$refs.tips.style.display = 'block'

却总是报错，显示style没有定义。

检查发现这个子节点的父节点有v-for

ref绑定的节点tips，放入v-for中,tips此时也成为一个数组了。

对一个装有dom的数组操作样式，当然会报错了！！！

换言之，只要是在界面出现两个以上ref定义同名的dom节点,那么此时获取的ref已经是一个数组了。

这个时候想通过ref修改dom子节点样式，需要用索引的方式获取dom子节点。

注意：

v-show 与 v-if的区别，它们的使用会对ref以及v-for都会造成影响。

众所周知，v-if=“false”时，这个节点直接不会出现在dom中。

v-show = "false"时，这个节点不会显示出来，但是会挂载到dom中。

由此：如果注意，在使用ref时，如果需要写判断，做好用v-if。

在v-for中，如果不能确定子元素是否一定具有某个属性，却又要使用这个属性时，如果用判断切记使用v-if,否则就会在没有这个属性的时候报错。