uniapp中canvas与v-if更“配”

最近接到了一个开发小游戏的项目，一共由四个小游戏组成，前三个因为开发难度不大所以很快就完成了，但最后一个游戏时，却遇到了不少的问题，本人从未遇到过，所以记录下来，帮助其他人。

uniapp的小程序无法支持v-show

我们都知道，在界面元素节点需要反复切换显示时，v-show的效率肯定是比v-if高的，本来我很多时候都打算用v-show，但发现在小程序中根本没有任何效果，最后在官方的文档中看到有关此问题的解释。

v-if会与canvas发生冲突

如上图所示：进入该游戏时，首先有一个主界面，点击屏幕任意位置则开始游戏（这里就是通过v-if进行页面元素的切换）。我们可以看到，第一次是可以成功地在屏幕中生成了指定的页面内容，canvas也没有任何问题，但当我继续玩下去的时候，问题产生了。

我去！居然canvas无法再继续画图了！！！在这里我卡了两天，排除了一系列可能导致本问题的因素。在我因解决不了问题而头疼时，突然脑海中浮现出了一个想法：会不会是因为v-if的原因？我们知道，v-if会先判断条件是否成立，如果成立，则渲染此元素，否则不会渲染此元素，对于已经渲染的元素，则会卸载此元素。而当前的需求，canvas会被反复卸载并重新渲染，会不会就是因为被卸载并重新渲染的原因，才导致第二次绘图失败？于是我测试了一下，由于无法使用v-show，所以我使用了style属性代替：

	:style="answer_flag===true?'':'display:none;'"

果然如此，v-if卸载canvas元素之后，再次重新渲染canvas元素，将会导致无法再次获取canvas元素节点，从而无法再次绘图，但我们可以通过设置display来代替v-if，display只是隐藏标签元素，而不是卸载，便成功了解决了此问题。

block标签无法设置style以及class

block本身就是一个很特殊的标签元素，因为它并不会被渲染到页面中，只是充当一个占位符的角色，所以常用来配合v-if、v-for使用，这也是为什么block标签无法设置style以及class属性的原因。

本文地址：https://blog.csdn.net/qq_35149975/article/details/107872714