表单输入

基础用法

多行文本

用<textarea>标签包裹的元素可以输入多行文本。
但是，在Vue中，<textarea>标签的值需要通过v-model指令来绑定，不能直接用{{}}来绑定。

复选框

<input type="checkbox">标签下v-model：

1. 可以绑定布尔值类型

   <input type="checkbox" id="checkbox" v-model="checked" />
   <label for="checkbox">{{ checked }}</label>

   Vue

   复制

   这个复选框未被勾选时，checked的值为false，被勾选时，checked的值为true，然后作为文本插值动态显示。

2. 将复选框的值绑定到数组中

   const checkedNames = ref([])

   Js

   复制

   <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
   <label for="jack">Jack</label>
   <input type="checkbox" id="john" value="John" v-model="checkedNames" />
   <label for="john">John</label>
   <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
   <label for="mike">Mike</label>

   Vue

   复制

   这个复选框未被勾选时，checkedNames的值为空数组，被勾选时，label标签的值作为表单输入，传递到数组中

对于单选框同理

值绑定

对于选单要输入的值的动态数据绑定，可以用v-bind指令来实现。

true-value 和 false-value 是 Vue 特有的 attributes，仅支持和 v-model配套使用。

<input type="checkbox" v-model="toggle" true-value="yes" false-value="no" />

这个复选框未被勾选时，toggle的值为no，被勾选时，toggle的值为yes。

修饰符

.lazy 每次input事件触发后，将数据同步到v-model绑定的值。

.number 将输入的值转换为数字类型。

.trim 将输入的值去除首尾空格。