vue 实现随机背景图

话不多说上效果：

下面是要设置背景变化的地方：

<div class="login-container" :style="backgourndStyle"></div>

computed:{
        backgourndStyle:function(){
            // 计算body可用高度
            let cHeight = window.outerHeight - (window.outerHeight - window.innerHeight)
            // 存放要换的图片
            let imgs = ["http://bookstore.zealon.cn/00-4.jpg","http://bookstore.zealon.cn/0-2.jpg","http://bookstore.zealon.cn/0-6.png"]
            let imgName = imgs[Math.floor(Math.random() * 3)] //进行计算随机
            let style = "background-image:url('" + imgName + "'); background-repeat: round; height:" + cHeight + "px;";
            return style
        }
   }

这样就可以实现在页面刷新之后随机背景图。

最后

以上就是娇气皮卡丘最近收集整理的关于vue 实现随机背景图的全部内容，更多相关vue内容请搜索靠谱客的其他文章。