vue v-model表单控件绑定详解

2022-01-14,,,,

这篇文章主要为大家详细介绍了vue v-model表单控件绑定的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

v-model 指令在表单控件元素上创建双向数据绑定,下面一一进行示例解释。

1、v-model 双向绑定文本

     

Message is: {{ message }}

输出结果:

2、v-model 双向绑定多行文本,与上面的例子相似。

     <Multiline message is:

{{ message }}


输出结果:

3、v-model 绑定复选框

     

输出结果:选中为true   不选中则为false

     
Checked names: {{ checkedNames }}

输出结果:

4、v-model 绑定单选按钮

     

Picked: {{ picked }}

输出结果:

5、v-model 绑定下拉列表

      ABCSelected: {{ selected }}

输出结果:

多选列表

      ABC
Selected: {{ selected }}

输出结果:

6、动态选项,用 v-for 渲染:

       {{ option.text }} Selected: {{ selected }}

输出结果:

以上就是vue v-model表单控件绑定详解的详细内容,更多请关注本站其它相关文章!

《vue v-model表单控件绑定详解.doc》

下载本文的Word格式文档,以方便收藏与打印。