vue基础八

Posted 2020-08-27 爱吃鱼摆摆

表单控件绑定

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="One" v-model="picked">

<label for="one">One</label>

<br>

<input type="radio" id="two" value="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>