表单绑定

表单各项绑定

通过 v-model 实现

1、textarea

<textarea v-model="textareaData"></textarea>

2、radio

<input type="radio" value="male" v-model="sex" />
<input type="radio" value="famale" v-model="sex" />

sex: ''

3、checkbox

<input type="checkbox" value="red" v-model="color" />
<input type="checkbox" value="blue" v-model="color" />
<input type="checkbox" value="yellow" v-model="color" />

color: [] // 选中哪个，就把其加入到数组中

4、select

1. 单选

<select v-moel="answer">
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

answer: ''

2. 多选

<select v-moel="color" multiple>
    <option>red</option>
    <option>blue</option>
    <option>yellow</option>
</select>

color: [] // 选中哪个，就把其加入到数组中

修饰符

<input type="text" v-model.修饰符="data" />

1. lazy：输入完后才变化
2. number：输入完后变成数字
3. trim：去掉首尾空格