主要用到的還是Vue的基本知識而已，不過要想到的細節很多。
先放效果，點選上框，顯示timepicker。而且可以根據點選的是時還是分來改變圓盤的數字。

這裡我用了兩個元件，<time-box>和<time-picker>，這裡的時和分的數值我掛在了根例項中，因為兩個元件都需要這兩個值，所以想了想我決定還是掛在根例項，通過動態繫結到元件中。HTML見線上demo。

根元件

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;
        })
    }
})

<time-box>元件

點選時、分的時候，要“通知”根例項點選的是什麼，下面的時鐘才能顯示相應的數字。改變父元件的屬性，有兩種辦法，一是直接修改父元件屬性；二是通過自定義事件。

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;
            }
        }
    }
});

<time-picker>元件

• 這裡最需要注意的就是單向資料流。時分是通過props傳進來的，剛開始我直接操作this.hour，然後控制檯警告。看到警告才想起看過的知識，這樣很容易誤改父元件的資訊。所以啊，有些東西得實踐才行，不能只看不敲。這裡我定義一個區域性 data 屬性，並將 prop 的初始值作為區域性資料的初始值。知識點：https://cn.vuejs.org/v2/guide/components.html#單向資料流

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

• 正常情況下，如果時分不夠兩位數就要自動新增0，實現很簡單的。剛開始直接判斷是否小於10就新增。但是，“08”是小於10的，所以又自動新增0了。但是我覺得這裡寫得不好，還有改進的空間的。

//時分保證是兩位數
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
},

• 再說說template裡面的事吧。點選timepicker裡面的時分改變元件的的current屬性和透明度。這裡顯示資料就需要用到fixHour和fixMinutes了。

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

• 圓盤裡的內容就靠v-for了。先定義好12個位置，然後遍歷每個位置。裡面的針就通過CSS3的旋轉啦。一共360度，12個格，一小時60分鐘，這麼簡單的數字知識就不繼續說下去了，下面的乘法我相信各位是看得懂的。這裡注意的是60，我們鐘錶沒有60只有0啊，所以 ((5 * i) % 60 || “00”)。這裡寫得很有技巧。60%60是0。然後是||和&&的問題了（推薦兩本書《你不知道的JavaScript》上中卷，內容跟《高階程式設計JS》也不怎麼重複，值得看）。0強轉為false，然後||就返回第二個運算元的值。

<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 ? hour = i : minutes = ((5 * i) % 60 || \'00\')">{{current === 0 ? i : ((5 * i) % 60 || "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 ? 'rgb(0, 188, 212)' : 'rgba(255, 255, 255, 0)',
            color: !hasSelected ? '#2c3e50' : '#FFF'
        }
        return styleObj;
    }
}

• 最後就是把選好的數值傳回給父元件啦。

//關閉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就不行呢？沒想明白。。。。