1.效果预览
页面整体效果如下
![](https://i-blog.csdnimg.cn/blog_migrate/0810034361eb6e8d16147ef2f73419cd.png)
顶部的数字翻牌器效果
![](https://i-blog.csdnimg.cn/blog_migrate/2cdad4004333484ca655cb0e9d1f4b63.png)
2.数字翻牌器的实现
数字翻牌器我们借助于DataV组件来实现,示例如下
<dv-digital-flop :config="config" style="width:200px;height:50px;" />
config属性配置如下
![](https://i-blog.csdnimg.cn/blog_migrate/b1f4e5bd4c9ab014a6ef63a190a14b04.png)
注意:number属性是个数组,我们在初始化的时候给number属性一个默认的数组及值,当我们想动态改变数字翻牌器的值的时候,我们需要重新赋值整个number数组,而不仅仅是number数组中的number属性,赋值示例如下