当前位置: 首页 > 后端技术 > PHP

Vue.js第8课表单

时间:2023-03-29 16:02:41 PHP

本节介绍Vue.js表单上的应用。您可以使用v-model指令在表单控件元素上创建双向数据绑定。v-model会根据控件类型自动选择正确的方法来更新元素。输入框示例演示了在input和textarea元素中使用v-model实现双向数据绑定:

input元素:

消息是:{{message}}

textarea元素:

{{message2}}}

checkbox复选框如果是逻辑值,如果它不止一个,绑定到同一个数组:checkboxes以下示例演示了复选框的双向数据绑定:

Singlecheckbox:

{{checked}}

多个复选框:

Runoob谷歌淘宝选择的值为:{{checkedNames}}
实例中勾选复选框的效果如下:radiobutton下面的例子演示单选按钮的双向数据绑定:radiobuttonRunoobGoogle选择的值为:{{picked}}
选中后效果如下图:selectlist下面的例子演示了下拉列表的双向数据绑定:选择选择一个网站Google所选站点为:{{selected}}
选择Runoob,输出效果如下:修饰符.lazy默认,v-model在input事件中同步输入框的值和数据,但是可以在change事件中添加一个lazytochange修饰符来同步:.number如果想自动将用户输入的值转换为Number类型(如果原值转换结果为NaN则返回原值),可以加修饰符number到v-model来处理输入值:这通常很有用,因为在HTML中输入的值在type="number"时总是会返回一个字符串类型.trim如果要自动过滤用户输入的前导和尾随空格,您可以将trim修饰符添加到v-model以过滤输入: