v-model的使用方法
时间: 2023-09-14 13:12:11 浏览: 82
v-model是Vue.js中最常用的指令之一,用于实现双向数据绑定。
在表单元素中,v-model可以实现数据的双向绑定,即表单元素的值改变时,数据也会随之改变。同时,当数据改变时,表单元素的值也会随之改变。
下面是v-model的使用方法:
1. 文本框
```
<input type="text" v-model="message">
```
2. 多选框
```
<input type="checkbox" v-model="checked">
```
3. 单选框
```
<input type="radio" value="A" v-model="selected">
```
4. 下拉框
```
<select v-model="selected">
<option disabled value="">请选择</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
```
其中,`message`、`checked`、`selected`都是Vue实例中的数据属性。当表单元素的值改变时,这些数据属性也会随之改变。
需要注意的是,v-model只能用于表单元素,而不能用于普通元素。
阅读全文