在vue.js 写的H5页面中使用时间插件rolldate遇到的坑

背景

由于项目需要，写一个H5页面，用了Vue.js，在页面中用到了时间插件，发现最新版的rolldate时间插件还不错，就用上了。

问题

因为页面涉及Tabs切换，所以我用来v-if来控制代码块的显示与隐藏，那么，问题来了，页面一进来就初始化了时间控件，切换tab之前，时间控件选择页面的打开收起都非常正常，可是，当我切换了tab之后，所有的时间控件的选择都不出现了，代码也没有任何报错。真是各种凌乱

此时我就开始各种怀疑， 是不是rolldate这个插件不能在vue.js下使用呢？结果看到可以在Vue下使用时，我就更凌乱了

找了好一会儿，也没发现问题，后面脑子一热，想了一下是不是切换tab原因呢？然后想说试试把v-if换了，用v-show试试，结果，rolldate插件能正常使用了，能正常使用了，能正常使用了。

解决方法

将v-if换位v-show；

v-if 指令用于条件性地渲染某一块内容，这块内容将根据表达式中指定的值的真假来插入/移除；

v-show 指令根据条件展示或者隐藏元素，只是操作了元素的 display 属性，带有 v-show 的元素始终会被渲染并保留在 DOM 中（可能就是这个原因才能正常初始化插件）

根据官网文档可发现：