[JavaScript知识库]vue中显示隐藏的两种指令以及数据页面加载时报错解决

显示隐藏

1. v-if
   v-if是通过控制dom节点的存在与否来控制元素的显隐，不需要高频切换的时候更多的使用。
2. v-show
   v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；v-show只是简单的基于css切换；需要高频切换的时候更多的使用。
   总结：综上所述，当我们在页面中，如果需要非常频繁地切换某个节点，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。v-if有更高的切换消耗；v-show有更高的初始渲染消耗。
3. v-if能够解决在页面上数据未加载上的时候报错，如果当我们的元素节点已经加载，但数据还未加载（可能是请求过慢，也可能是处理数据时出错）成功，此时我们的页面就会报错，就可以通过给需要绑定数据的那一部分使用v-if显示隐藏来判断dom节点是否显示，来解决此问题，当数据加载完成，页面即可以正常显示。（注不能使用v-show，v-show也能隐藏元素，但是页面元素本身是一直存在的，并没有销毁）。