```html
<div class="demo-block" id="x-address-demo1">
  <lx-group>
    <lx-x-address
      v-model="value"
      title="使用默认数据"
      show-name
      placeholder="请选择地址"
      inline-desc="可以设置placeholder"
      @on-change="handleChange($event, '选择省市区的')"
      @on-hide="logHide"
      @on-show="logShow"
    />
    <lx-cell
      title="上面value值"
      :value="JSON.stringify(value)"
    />
    <lx-x-address
      v-model="value2"
      title="手动设定"
      show-name
      :list="addressData"
    />
  </lx-group>
  <br>
  <lx-x-button
    type="primary"
    @click.native="changeData"
  >
    改变数据
  </lx-x-button>
  <br>
  <lx-group>
    <lx-x-address
      v-model="value4"
      title="只显示省市"
      raw-value
      show-name
      :list="addressData"
      hide-district
    />
    <lx-x-address
      v-model="value6"
      title="name只显示市"
      raw-value
      show-second-name
      :list="addressData"
      hide-district
    />
    <lx-cell
      title="value值"
      :value="JSON.stringify(value4)"
    />
    <lx-cell
      title="转换成文字值"
      :value="getName(value4)"
    />
  </lx-group>

  <br>
  <lx-group title="错误的地址将不能正确渲染">
    <lx-x-address
      v-model="value5"
      title="广东省, 深圳 市, 南山区"
      show-name
      :list="addressData"
    />
  </lx-group>
</div>


<script>
// XAddress.md
// import { cvux as AddressChinaData, tools } from 'city-data/lib/mobile'
// const value2name = tools.value2name
const AddressChinaData = window.cvux.default.static.AddressChinaData
const value2name = window.cvux.default.cityDataTools.static.value2name
new Vue({
  el: '#x-address-demo1',
  
  data: {
    value: [],
    value2: ['440000', '440300', '440305'],
    value3: ['海南省', '儋州市', '--'],
    addressData: AddressChinaData,
    value4: [],
    value5: ['440000', '440300', '440305'],
    value6: []
  },
  methods: {
    changeData () {
      this.value2 = ['430000', '430400', '430407']
      // this.value2 = ['110000', '110100']
    },
    getName (value) {
      value = value || ['110000', '110100']
      return value2name(value, AddressChinaData)
    },
    logHide (str) {
      console.log('on-hide', str)
    },
    logShow (str) {
      console.log('on-show')
    },
    /**
     * 地址值变化
     * @param data
     */
    handleChange(data, type) {
      console.log(data, type)
    }
  }
})
</script>
```