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 实现随机背景图所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。