vue专栏 02.vue基础语法 06.v-model 02.表单操作

# 02.v-model表单操作

[toc]{type: "ol", level: [3,4]}

### js结构
```js
const app = Vue.createApp({
    data() {
        return {
            sex: '',
            isAgree: false,
            hobbies: [],
            stars: ['范冰冰', '李冰冰', '刘亦菲'],
            likes: [],
            city: '',
            cities: [],
        }
    }
}).mount('#app');
```

### 单选
```html
<label><input name="sex" type="radio" value="男" v-model="sex">男</label>
<label><input name="sex" type="radio" value="女" v-model="sex">女</label>
<h3>性别：{{ sex }}</h3>
```
![v-model表单操作-01](imgs/02.v-model表单操作-01.png)
![v-model表单操作-02](imgs/02.v-model表单操作-02.png)


### 多选 
#### 勾选单个
> 用于同意协议等
```html
<label><input name="" type="checkbox" value="" v-model="isAgree">同意</label>
<h3>是否同意：{{ isAgree ? '同意' : '不同意' }}</h3>
<!--不同意时，无法注册-->
<button :disabled="!isAgree">注册</button>
```
![v-model表单操作-03](imgs/02.v-model表单操作-03.png)
![v-model表单操作-04](imgs/02.v-model表单操作-04.png)

#### 勾选多个 静态
```html
<label>兴趣爱好</label>
<label><input type="checkbox" value="篮球" v-model="hobbies">篮球</label>
<label><input type="checkbox" value="足球" v-model="hobbies">足球</label>
<label><input type="checkbox" value="排球" v-model="hobbies">排球</label>
<h3>兴趣爱好：{{ hobbies }}</h3>
```
![v-model表单操作-05](imgs/02.v-model表单操作-05.png)
![v-model表单操作-06](imgs/02.v-model表单操作-06.png)

#### 勾选多个 动态 绑定值
```html
<!--将数组中的值遍历出来-->
<label v-for="star in stars" :for="star">
    <input type="checkbox" :value="star" :id="star" v-model="likes">{{star}}
</label>
<h3>喜欢的明星：{{ likes }}</h3>
```
![v-model表单操作-07](imgs/02.v-model表单操作-07.png)
![v-model表单操作-08](imgs/02.v-model表单操作-08.png)


### 下拉选项
#### 单选
```html
<label>所在城市：</label>
<label>
    <select name="city" v-model="city">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="深圳">深圳</option>
    </select>
</label>
<h3>所在的城市：{{ city }}</h3>
```
![v-model表单操作-09](imgs/02.v-model表单操作-09.png)
![v-model表单操作-10](imgs/02.v-model表单操作-10.png)

#### 多选
```html
<label>去过的城市：</label>
<label>
    <select name="city" v-model="cities" multiple>
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="深圳">深圳</option>
    </select>
</label>
<h3>去过的城市：{{ cities }}</h3>
```
![v-model表单操作-11](imgs/02.v-model表单操作-11.png)
![v-model表单操作-12](imgs/02.v-model表单操作-12.png)