首页 > 代码库 > vue基础八

vue基础八

2024-08-31 19:48:49   209人阅读

表单控件绑定

1.基础用法

你可以用 v-model 指令在表单控件元素上创建双向数据绑定。尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。

1.1文本

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
1.2复选框
单个勾选框，逻辑值：
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
1.3单选按钮
<input type="radio" id="one" value=http://www.mamicode.com/"One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value=http://www.mamicode.com/"Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
1.4选择列表
单选列表：
<select v-model="selected">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
多选列表（绑定到一个数组）：
<select v-model="selected" multiple>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
 

vue基础八


联系
我们