```html
<div class="demo-block" id="x-number-demo1">
  <lx-group title="Default">
    <lx-x-number>
      v-model="v0"
      name="number"
      title="Number"
    />
  </lx-group>

  <lx-group title="listen to change events">
    <lx-x-number>
      v-model="v1"
      name="listen"
      title="Number"
      :min="0"
      @on-change="change"
    />
  </lx-group>

  <lx-group title="set width=100">
    <lx-x-number>
      v-model="v7"
      title="Number"
      :width="100"
    />
  </lx-group>

  <lx-group title="set step=0.5">
    <lx-x-number>
      v-model="v6"
      title="Number"
      :step="0.5"
    />
  </lx-group>

  <lx-group title="set value=1, min=-5 and max=8">
    <lx-x-number>
      v-model="v2"
      title="Number"
      :min="-5"
      :max="8"
    />
  </lx-group>

  <lx-group title="fillable = false">
    <lx-x-number>
      v-model="v3"
      title="Number"
      :fillable="false"
    />
  </lx-group>

  <lx-group title="with other element">
    <lx-x-number>
      v-model="v4"
      title="Number"
      :min="-5"
      :max="8"
      type="inline"
    />
    <lx-x-number>
      v-model="v5"
      title="Number"
      :min="-5"
      :max="8"
      type="inline"
    />
    <lx-x-switch
      v-model="show"
      title="Other element"
    />
  </lx-group>
  <lx-group title="custom Number">
    <lx-x-number>
      v-model="v4"
      title="Number"
      :shell="false"
      :min="-5"
      :max="8"
      type="inline"
      input-classes="input"
    >
      <a
        slot="add"
        style="dispaly:inline-block;width:20px;height:20px;"
        href="javascript:void(0);"
      >A</a>
      <a
        slot="sub"
        style="dispaly:inline-block;width:20px;height:20px;"
        href="javascript:void(0);"
      >S</a>
    </lx-x-number>
  </lx-group>
</div>


<script>
// XNumber.md
new Vue({
  el: '#x-number-demo1',
  
  data: {
    show: true,
    v0: 0,
    v1: 0,
    v2: 1,
    v3: 10,
    v4: 1,
    v5: 1,
    v6: 0,
    v7: 0
  },
  methods: {
    change (val) {
      console.log('change', val)
    }
  }
})
</script>
<style>
  .input {
    border: 1px solid red;
  }
</style>
```