【Vue】表单input绑定

网址&＃xff1a;https://vue.docschina.org/v2/guide/forms.html

表单 input 绑定

基础用法

可以通过使用 v-model 指令&＃xff0c;在表单 input, textarea 和 select 元素上创建双向数据绑定。v-model 指令可以根据 input 的 type 类型&＃xff0c;自动地以正确的方式更新元素。虽然略显神奇&＃xff0c;然而本质上 v-model 不过是「通过监听用户的 input 事件来更新数据」的语法糖&＃xff0c;以及对一些边界情况做特殊处理。

v-model 会忽略所有表单元素中 value, checked 或 selected 属性上初始设置的值&＃xff0c;而总是将 Vue 实例中的 data 作为真实数据来源。因此你应该在 Javascript 端的组件 data 选项中声明这些初始值&＃xff0c;而不是 HTML 端。

对于需要使用输入法的语言&＃xff08;中文、日文、韩文等&＃xff09;&＃xff0c;你会发现&＃xff0c;在输入法字母组合窗口输入时&＃xff0c;v-model 并不会触发数据更新。如果你想在此输入过程中&＃xff0c;满足更新数据的需求&＃xff0c;请使用 input 事件。

单行文本(text)

message 是&＃xff1a;{{ message }}

多行文本(multiple text)

多行 message 是&＃xff1a;


{{ message }}

在 textarea 中插值&＃xff08;{{text}}&＃xff09;并不会生效。使用 v-model 来替代。

checkbox

单选 checkbox&＃xff0c;绑定到布尔值&＃xff1a;


{{ checked }}


多选 checkbox&＃xff0c;绑定到同一个数组&＃xff1a;

radio


One



Two


选中的是&＃xff1a;{{ picked }}