Renderings
1, DOM binding properties, output data
2, a click event bindings
3, the filter filters the application
4, the monitor watch
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
html,body{height: 100%}
body{ font-family: "微软雅黑" }
*{padding: 0;margin:0;}
img{max-width: 100%}
ul,li{list-style: none}
.app{min-height: 100%; color: #333;background-size: cover;}
.con{height: 100%;width: 1000px;margin: 0 auto; overflow: hidden;}
.img{width: 400px;float: left;margin-top: 80px}
.txt{float: right;width: 450px;padding: 80px 0}
.title{height: 80px;font-size: 18px; border:10px double #000; background: #fff;text-align: center; line-height: 60px; box-sizing: border-box; box-shadow: 0 15px 30px rgba(0,0,0,0.1);}
.txt ul li{padding:10px 0;margin:20px 0; transition: all 400ms;cursor: pointer; background-image: url(images/bg_w.png); font-weight: 700}
.txt ul li p{ color: #fff;font-size: 12px; font-weight: 100}
.txt ul li:hover{ -webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.1); box-shadow: 0 15px 30px rgba(0,0,0,0.1); -webkit-transform: translate3d(0, -2px, 0); transform: translate3d(0, -2px, 0);}
.add{color: #666;line-height: 50px; text-align: center;cursor: pointer; margin-top: 50px}
.addsign{text-align: center;}
.pink{ background-image: url(images/pink.jpg); }
.pinktitle{border-color: #FC7FB6;}
.pink ul li{ text-indent: 20px; border-radius: 2px}
.pink ul li:nth-child(odd){background-color: #FC7FB6}
.pink ul li:nth-child(even){background-color: #FFBBE1}
.green{ background-image: url(images/green.jpg); }
.greentitle{border-color: #1FAB89;}
.green ul li{ text-indent: 20px; border-radius: 2px}
.green ul li:nth-child(odd){background-color: #62D2A2}
.green ul li:nth-child(even){background-color: #9DF3C4}
.blue{ background-image: url(images/blue.png); }
.bluetitle{border-color: #0E7CF4 ;}
.blue ul li{ text-indent: 20px; border-radius: 2px}
.blue ul li:nth-child(odd){background-color:#0AA0F6}
.blue ul li:nth-child(even){background-color: #0E7CF4}
.pinkpic{ background-image: url(images/pink2.jpg); }
.pinkpictitle{border-color: #FFBEE3;}
.pinkpic ul li{ text-indent: 20px; border-radius: 2px}
.pinkpic ul li:nth-child(odd){background-color: #FFBEE3}
.pinkpic ul li:nth-child(even){background-color: #FC5BB6}
.greenpic{ background-image: url(images/green2.jpg); }
.greenpictitle{border-color: #475762;}
.greenpic ul li{ text-indent: 20px; border-radius: 2px}
.greenpic ul li:nth-child(odd){background-color: #ECEFF4}
.greenpic ul li:nth-child(even){background-color: #475762}
.bluepic{ background-image: url(images/blue2.jpg); }
.bluepictitle{border-color: #7098DA ;}
.bluepic ul li{ text-indent: 20px; border-radius: 2px}
.bluepic ul li:nth-child(odd){background-color:#7098DA}
.bluepic ul li:nth-child(even){background-color: #6EB6FF}
}
</style>
</head>
<body>
<div class="app" id="app" v-bind:class="skin_f" :style="{backgroundColor:bgcolor}">
<div class="con">
<div class="img">
<img v-bind:src="imgurl" width="400" />
</div>
<div class="txt">
换肤时间：{{now | formatTime}}
<div class="title" v-bind:class="title">柚子的Vue换肤</div>
<ul>
<li v-for="(skinitem,index) in skin" v-on:click="getskin(index)">
{{skinitem.name}}
<p>{{skinitem.key}}<p>
</li>
</ul>
<div class="add" v-if="!message" v-on:click="moreskin">加载更多...</div>
<div class="addsign" v-if="message"><img src="images/end.png"></div>
</div>
</div>
</div>
</body>
</html>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
message:false,
skin_f:"green",
imgurl:"images/con_green2.jpg",
title:"greentitle",
bgcolor:"green",
now:new Date(),
skin:[
{"name":"粉色纹理背景",
"key":"pink",
"imgurl":"images/con_pink2.png",
"bgcolor":"pink"
},
{"name":"绿色纹理背景",
"key":"green",
"imgurl":"images/con_green2.jpg",
"bgcolor":"green"
}
,
{"name":"蓝色纹理背景",
"key":"blue",
"imgurl":"images/con_blue2.jpg",
"bgcolor":"#2AA2F9",
}
],
skinmore:[
{"name":"粉色图片背景",
"key":"pinkpic",
"imgurl":"images/con_pinkp2.png",
"bgcolor":"pink"
},
{"name":"绿色图片背景",
"key":"greenpic",
"imgurl":"images/con_greenp2.jpg",
"bgcolor":"green"
}, ,
{"name":"蓝色图片背景",
"key":"bluepic",
"imgurl":"images/con_bluep2.png",
"bgcolor":"#2AA2F9"
}
]
},
watch:{
skin:function(){
this.message=true;
},
skin_f:function(){
this.now=new Date();
}
},
filters:{
formatTime:function(val){
function addzero(num){
if( num < 10)
{
num="0"+num;
}
return num;
}
var str='';
var month=val.getMonth()+1;
var day=val.getDate();
var hour=val.getHours();
var minute=val.getMinutes();
var second=val.getSeconds();
return str=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>
复制代码Download: Vue Case I
First good, then good
shortcomings, welcome that