var app = new Vue({
 el: "#app",
 data: {
  minutes: 15,
  hour: 8,
  showTimePicker: false,
  current: 0  //0为时、1为分
 },
 created: function(){
  this.$on("closeTimePicker",function() {  //监听关闭time-picker
   this.showTimePicker = false;
  }),
  this.$on("openTimePicker",function() {
   this.showTimePicker = true;
  }),
  this.$on("getTime",function(h,m) {   //获取time-picker返回的点击后的数值，然后动态改变
   this.minutes = m;
   this.hour = h;
  })
 }
})

Vue.component('time-box',{
 template:'  <div class="timeBox" @click="openTime">   <span @click="changeCurrent(\'h\')">{{hour}}</span>   <span> : </span>   <span @click="changeCurrent(\'m\')">{{minutes}}<span/>  </div>',
 props: ['hour','minutes'],
 methods: {
  openTime: function() {
   app.$emit("openTimePicker");
  },
  changeCurrent: function(type) {
   if(type == 'h' ){
    app.current = 0;
   } else {
    app.current = 1;
   }
  }
 }
});

props: ['h','m','mode'],
data: function() {
 return {
  current: this.mode,
  hour: this.h,
  minutes: this.m
 }
},

//时分保证是两位数
fixHour: function() {
 return (this.hour < 10 && this.hour.toString().indexOf(0) !== 0) "0" + this.hour : this.hour
}
fixMinutes: function() {
 return (this.minutes < 10 && this.minutes.toString().indexOf(0) !== 0) "0" + this.minutes : this.minutes
},

<div class="showtime">
 <span @click="current = 0" :style="{opacity: current == 0 ">{{fixHour(hour)}}</span>
 <span>:</span>
 <span @click="current = 1" :style="{opacity: current == 1 ">{{fixMinutes(minutes)}}</span>
</div>

<template>
 <div class="hourpicker">
   <div class="selector" :style="selectorRotateAngle()"></div>
   <span class="hourtxt" v-for="i in 12" :style="getHourStyle(i%12)" @click="current === 0 ">{{current === 0 "00")}}</span> </div>
</template>

methods: {
 //分时针的样式
 selectorRotateAngle: function(i) {
  if(this.current === 0) {
   return {
    transform: 'rotateZ('+(this.hour * 30)+'deg)'
   }
  } else {
   return {
    transform: 'rotateZ('+(this.minutes * 6)+'deg)'
   }
  }
 },
 //12格样式
 getHourStyle: function(i) {
  var hasSelected = (this.current === 0 && this.hour % 12 === i)
    || (this.current === 1 && this.minutes % 60 == (i * 5));  //判断到底是哪个数值被选中
  var styleObj = {
   transform: 'translate(' + positions[i][0] + "px, " + positions[i][1] + "px)",
   background: hasSelected "htmlcode">

//关闭timepicker
closePicker: function() {
 app.$emit('closeTimePicker');
},
 //获取时间
getTime: function() {
 app.$emit('getTime',this.fixHour(this.hour),this.fixMinutes(this.minutes));
 app.$emit('closeTimePicker');
}




v-if和v-show
v-show只是改变每次的display，而v-if如果为true才渲染到页面，所以每次隐藏显示都重新渲染一遍。我觉得。。。如果实际中，经常要开开关关的就用v-show就好了，但是用来v-show我发现不能根据选中的是时还是分来展现数值，很奇怪，v-if就可以。刚开始觉得是初始化问题，但是，既然hour和minute能根据props传下来再data转化，为啥mode就不行呢？没想明白。
在线demo：http://jsbin.com/dumace/2/edit?html,js,output
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。