7. 表单事件绑定

1. 输入框

<input v-model="myVal" type="text" name="" value="">
<input v-model.lazy="myVal" type="text" name="" value="">
<input v-model.number="myVal" type="text" name="" value="">

2. 单选

<input v-model="myVal" type="radio" name="" value="">
    <input v-model="myVal" type="radio" name="" value="">
    <input v-model="myVal" type="radio" name="" value="">
    <input v-model="myVal" type="radio" name="" value="">

3.多选

<input v-model="myVal" type="checkbox" name="" value="">
    <input v-model="myVal" type="checkbox" name="" value="">
    <input v-model="myVal" type="checkbox" name="" value="">
    <input v-model="myVal" type="checkbox" name="" value="">

myVal是数组[]

4. select 

<select v-model="myVal" class="" name="">
      <option value="0">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>

如何模拟select？怎样实现自定义组件

思路：

1.在父组件当中引入v-select子组件

import vSelect from ''


template:

<v-select :options="options"></v-select>

2.配置父组件vue的实例选项

components: {
  vSelect  
}

3.数据在父组件当中，传递给子组件

options: [
{
  name: '',
  price: 18        
},
{
  name: '',
  price: 18        
},
{
  name: '',
  price: 18        
}
]

4. 子组件接收options数据

props: {
    'options': [Array]
}

5. html代码，onChange事件等在子组件当中实现