小程序开发 网站建设,小说网站上的广告在哪做,wordpress lazy load,网站建设及安全制度你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇#xff0c;但 v-model 本质上不过是语法糖#xff0c;它负责监听用户的输入事件以更新数据#xff0c;并特别处理一些极端的例子。 v-model 会忽略所有…你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇但 v-model 本质上不过是语法糖它负责监听用户的输入事件以更新数据并特别处理一些极端的例子。 v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值。因为它会选择 Vue 实例数据来作为具体的值。你应该通过 JavaScript 在组件的 data 选项中声明初始值。 对于要求 IME (如中文、日语、韩语等) (IME 意为“输入法”)的语言你会发现 v-model 不会在 ime 输入中得到更新。如果你也想实现更新请使用 input 事件。 文本 input v-modelmessage placeholderedit me pMessage is: {{ message }}/p Message is: 多行文本 spanMultiline message is:/span p stylewhite-space: pre-line;{{ message }}/p br textarea v-modelmessage placeholderadd multiple lines/textarea Multiline message is: m kl 在文本区域插值 (textarea/textarea) 并不会生效应用 v-model 来代替。 复选框 单个勾选框逻辑值 input typecheckbox idcheckbox v-modelchecked label forcheckbox{{ checked }}/label false 多个勾选框绑定到同一个数组 div idexample-3 input typecheckbox idjack valueJack v-modelcheckedNames label forjackJack/label input typecheckbox idjohn valueJohn v-modelcheckedNames label forjohnJohn/label input typecheckbox idmike valueMike v-modelcheckedNames label formikeMike/label br spanChecked names: {{ checkedNames }}/span /div new Vue({ el: #example-3, data: { checkedNames: [] } }) Jack John Mike Checked names: [] 单选按钮 div idexample-4 input typeradio idone valueOne v-modelpicked label foroneOne/label br input typeradio idtwo valueTwo v-modelpicked label fortwoTwo/label br spanPicked: {{ picked }}/span /div new Vue({ el: #example-4, data: { picked: } }) One Two Picked: 选择列表 单选列表 div idexample-5 select v-modelselected option disabled value请选择/option optionA/option optionB/option optionC/option /select spanSelected: {{ selected }}/span /div new Vue({ el: ..., data: { selected: } }) 请选择 A B C Selected: A 如果 v-model 表达初始的值不匹配任何的选项select 元素就会以”未选中”的状态渲染。在 iOS 中这会使用户无法选择第一个选项因为这样的情况下iOS 不会引发 change 事件。因此像以上提供 disabled 选项是建议的做法。 多选列表 (绑定到一个数组) div idexample-6 select v-modelselected multiple stylewidth: 50px; optionA/option optionB/option optionC/option /select br spanSelected: {{ selected }}/span /div new Vue({ el: #example-6, data: { selected: [] } }) A B C Selected: [ C ] 动态选项用 v-for 渲染 select v-modelselected option v-foroption in options v-bind:valueoption.value {{ option.text }} /option /select spanSelected: {{ selected }}/span new Vue({ el: ..., data: { selected: A, options: [ { text: One, value: A }, { text: Two, value: B }, { text: Three, value: C } ] } }) One Two Three Selected: C 值绑定 对于单选按钮勾选框及选择列表选项v-model 绑定的 value 通常是静态字符串 (对于勾选框是逻辑值) !-- 当选中时picked 为字符串 a -- input typeradio v-modelpicked valuea !-- toggle 为 true 或 false -- input typecheckbox v-modeltoggle !-- 当选中时selected 为字符串 abc -- select v-modelselected option valueabcABC/option /select 但是有时我们想绑定 value 到 Vue 实例的一个动态属性上这时可以用 v-bind 实现并且这个属性的值可以不是字符串。 复选框 input typecheckbox v-modeltoggle v-bind:true-valuea v-bind:false-valueb // 当选中时 vm.toggle vm.a // 当没有选中时 vm.toggle vm.b 单选按钮 input typeradio v-modelpick v-bind:valuea // 当选中时 vm.pick vm.a 选择列表的选项 select v-modelselected !-- 内联对象字面量 -- option v-bind:value{ number: 123 }123/option /select // 当选中时 typeof vm.selected // object vm.selected.number // 123 修饰符 .lazy 在默认情况下v-model 在 input 事件中同步输入框的值与数据 (除了 上述 IME 部分)但你可以添加一个修饰符 lazy 从而转变为在 change 事件中同步 !-- 在 change 而不是 input 事件中更新 -- input v-model.lazymsg .number 如果想自动将用户的输入值转为 Number 类型 (如果原值的转换结果为 NaN 则返回原值)可以添加一个修饰符 number 给 v-model 来处理输入值 input v-model.numberage typenumber 这通常很有用因为在 typenumber 时 HTML 中输入的值也总是会返回字符串类型。 .trim 如果要自动过滤用户输入的首尾空格可以添加 trim 修饰符到 v-model 上过滤输入 input v-model.trimmsg 转载于:https://www.cnblogs.com/fdxxiaobai/p/7704665.html
