Vue表单

<!--

v-model

使用v-model后，表单控件显示的值只依赖所绑定的数据，

不在关心初始化时的value;

对于textarea 之间插入的值，

在中文输入法没有选定插入的值之前，不会触发更新，

可以使用@input来代替

radio checkbox select 的用法

修饰符:

.lazy 失去焦点或者回车才更新

v-mode.lazy="message"

.number

v-mode.lazy="message"

.trim 自动过滤首尾空格

-->

<input type="text" v-model="message">

<!-- <textarea v-model="message" id cols="30" rows="10"></textarea> -->

<textarea @input="handlerInput" id cols="30" rows="10"></textarea>

<!-- 单选按钮 -->

<!-- 单独使用 -->

<input type="radio" :checked="pickd">

<!-- 互斥效果 -->

<input type="radio" v-model="pickAll" value="html">

<input type="radio" v-model="pickAll" value="js">

<input type="radio" v-model="pickAll" value="css">

<hr>

<!-- 复选框 -->

<!-- 单独使用 -->

<input type="checkbox" id="checkOnly" v-model="checkOnly">

<label for="checkOnly">{{checkOnly}}</label>

<!-- 单独使用 -->

<input type="checkbox" id="checkOnlyhtml" v-model="checkAll" value="html">

<label for="checkOnlyhtml">html</label>

<input type="checkbox" id="checkOnlyjs" v-model="checkAll" value="js">

<label for="checkOnlyjs">js</label>

<input type="checkbox" id="checkOnlycss" v-model="checkAll" value="css">

<label for="checkOnlycss">css</label>

<hr>

<!-- 选择列表 -->

<!--

option 含有value 有限匹配value

否则匹配 text

-->

<select v-model="selectedOnly">

<option

v-for="(item, index) in optList"

:value="item.value"

:key="index"

>{{item.text}}</option>

</select>