<!--
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>
