```html
<div class="demo-block" id="clocker-demo1">
  <p style="padding:15px;">
    <span>Normal Usage</span>
    <lx-clocker :time="time1" />
  </p>

  <lx-group title="Use in cell">
    <lx-cell title="Date:0801">
      <lx-clocker
        slot="value"
        :time="time2"
        :s-time="time4"
      />
    </lx-cell>
  </lx-group>

  <lx-group title="custom template">
    <lx-cell title="Date:0801">
      <lx-clocker
        slot="value"
        :time="time2"
      >
        <span style="color:red">%D 天</span>
        <span style="color:green">%H 小时</span>
        <span style="color:blue">%M 分 %S 秒</span>
      </lx-clocker>
    </lx-cell>
    <lx-cell title="20180808">
      <lx-clocker
        slot="value"
        :time="time3"
      >
        <span class="day">%_D1</span>
        <span class="day">%_D2</span>天
        <span class="day">%_H1</span>
        <span class="day">%_H2</span>时
        <span class="day">%_M1</span>
        <span class="day">%_M2</span>分
        <span class="day">%_S1</span>
        <span class="day">%_S2</span>秒
      </lx-clocker>
    </lx-cell>
  </lx-group>
</div>


<script>
// Clocker.md
new Vue({
  el: '#clocker-demo1',
  data: {
    time1: '2017-07-13 21:54',
    time2: '2017-08-01 22:55',
    time3: '2018-08-08',
    time4: '2017-08-01 22:52'
  },
  created () {
    setTimeout(() => {
      this.time1 = '2016-08-13 22:54'
    }, 5000)
  }
})
</script>

<style>
.day {
  background-color:#000;
  color:#fff;
  text-align:center;
  display:inline-block;
  padding:0 3px;
  border-radius:3px;
}
</style>
```