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 >

转载于:https://www.cnblogs.com/niusan/p/10389667.html