vue.js实现换肤功能代码免费下载

一款简单的通过用vue.js实现换肤功能代码,改变网页背景与样式,还可以加载更多皮肤以及记录换肤时间。

JS代码

<script type="text/javascript"> 
var vm=new Vue({ 
    el:"#app", 
    data:{ 
        message:false, 
        skin_f:"green", 
        imgurl:"img/con_green.png", 
        title:"greentitle", 
        now:new Date(), 
        skin:[ 
            { 
                "name":"粉色背景", 
                "key":"pink", 
                "imgurl":"img/con_pink.png" 
            }, 
            { 
                "name":"绿色背景", 
                "key":"green", 
                "imgurl":"img/con_green.png" 
            }, 
            { 
                "name":"蓝色背景", 
                "key":"blue", 
                "imgurl":"img/con_blue.png" 
            } 
        ], 
        skinmore:[ 
            { 
                "name":"粉色背景", 
                "key":"pink", 
                "imgurl":"img/con_pink.png" 
            }, 
            { 
                "name":"粉色背景", 
                "key":"pink", 
                "imgurl":"img/con_pink.png" 
            } 
        ] 
    }, 
    watch:{ 
        skin:function(){ 
            this.message=true; 
        }, 
        skin_f:function(){ 
            this.now=new Date(); 
        } 
    }, 
    filters:{ 
        formatTime:function(val){ 
            function addzero(num){ 
                if(num<0){ 
                    num="0"+num; 
                } 
                return num; 
            } 
            var str=''; 
            var year=val.getFullYear(); 
            var month=val.getMonth()+1; 
            var day=val.getDate(); 
            var hour=val.getHours(); 
            var minute=val.getMinutes(); 
            var second=val.getSeconds(); 
            return str=year+'-'+addzero(month)+'-'+addzero(day)+' '+addzero(hour)+':'+addzero(minute)+':'+addzero(second); 
        } 
    }, 
    methods:{ 
        getskin:function(num){ 
            this.skin_f=this.skin[num]["key"]; 
            this.imgurl=this.skin[num]["imgurl"]; 
            this.title=this.skin[num]["key"]+"title"; 
            this.bgColor=this.skin[num]["bgColor"]; 
        }, 
        moreskin:function(){ 
            var _this=this; 
            this.skinmore.forEach(function(value){ 
                _this.skin.push(value); 
            }) 
        } 
    } 
}) 
</script>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录