Vueinput控件通过value绑定动态属性及修饰符的⽅法
对于单选按钮，勾选框及选择列表选项， v-model 绑定的 value 通常是静态字符串（对于勾选框是逻辑值）：
<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">
<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">
<!-- 当选中时，`selected` 为字符串 "abc" -->
<select v-model="selected">
<option value="abc">ABC</option>
</select>
但是有时我们想绑定 value 到 Vue 实例的⼀个动态属性上，这时可以⽤ v-bind 实现，并且这个属性的值可以不是字符串。
举个最容易认知的例⼦
<input type="radio" v-model="pick" v-bind:value="a">属于input属性
//当只有v-model的情况下，我们绑定了VUE实例中的pick这个数据，⽽这数据往往都是字符串或者是逻辑值，⽽如今通过v-bind绑定value，意味着，value是⼀个可变的数据 a,⽽不是字符串'a'，⽽v-model在这个控件选定后的值就是指向value,⽽⽤v-bind绑定后，指向// 当选中时
vm.pick === vm.a
.lazy
在默认情况下， v-model 在 input 事件中同步输⼊框的值与数据 (除了上述 IME 部分)，但你可以添加⼀个修饰符 lazy ，从⽽转变为在 change 事件中同步：
//测试是在失去焦点的时候才更新，⽽不是实时更新
<input v-model.lazy="msg" >
.number
如果想⾃动将⽤户的输⼊值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加⼀个修饰符 number 给 v-model 来处理输⼊值：
<input v-model.number="age" type="number">
{{typeof age}}//如果输⼊的是字符串则是string，如果是数字字符串则转换成number
这通常很有⽤，因为在 type=”number” 时 HTML 中输⼊的值也总是会返回字符串类型。
.trim
如果要⾃动过滤⽤户输⼊的⾸尾空格，可以添加 trim 修饰符到 v-model 上过滤输⼊：
<im="msg">
以上所述是⼩编给⼤家介绍的Vue input控件通过value绑定动态属性及修饰符的⽅法，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀
持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。