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>