```html
<div class="demo-block" id="selector-demo1">
  <lx-group :title="'no placeholder, the current value is : ' + defaultValue">
    <lx-selector
      v-model="defaultValue"
      title="省份"
      :options="list"
    />
  </lx-group>

  <lx-group title="with placeholder">
    <lx-selector
      placeholder="请选择省份"
      name="namellll"
      title="省份"
      :options="list"
      @on-change="onChange"
    />
  </lx-group>

  <lx-group title="without title">
    <lx-selector
      placeholder="请选择省份"
      :options="list"
    />
  </lx-group>

  <lx-group title="set value=广西">
    <lx-selector
      v-model="value1"
      title="省份"
      :options="plainList"
      @on-change="onChange"
    />
  </lx-group>

  <lx-group title="readonly, displays just like a cell">
    <lx-selector
      value="gd"
      readonly
      title="省份"
      :options="list"
    />
  </lx-group>

  <lx-group title="use plain options">
    <lx-selector
      value="C"
      title="Selector"
      :options="list1"
      @on-change="onChange"
    />
  </lx-group>

  <lx-group title="multi selector">
    <lx-selector
      placeholder="请选择省份"
      title="省份"
      :options="list"
    />
    <lx-selector
      v-model="value2"
      title="省份"
      :options="list"
    />
  </lx-group>
</div>


<script>
// Selector.md
new Vue({
  el: '#selector-demo1',
  
  data: {
    defaultValue: '',
    plainList: ['广东', '广西'],
    list: [{key: 'gd', value: '广东'}, {key: 'gx', value: '广西'}],
    value1: '广西',
    value2: 'gd',
    list1: ['A', 'B', 'C']
  },
  methods: {
    onChange (val) {
      console.log(val)
    }
  }
})
</script>
```