Vue-V-model参数绑定

Vue框架很核心的功能就是双向的数据绑定。 
双向是指:Vue 对象的改变会直接影响到 HTML 的标签的变化,而且标签的变化也会反过来影响 Vue 对象的属性的变化。
v-model 指令用来在


    
   
   
   

Vue-V-model参数绑定_第1张图片
当改变文本框的内容时,上面的一行数据也会改变

 

 

 

例子2,

 

v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值。因为它会选择 Vue 实例中的数据来作为具体的值

Vue-V-model参数绑定_第2张图片
Vue-V-model参数绑定_第3张图片

 

当inetrest为数组时 三个复选框可以单个选择,返回的值时,游泳,唱歌,玩游戏.

 

 

当interest为空字符串时,点击某一个复选框,默认三个复选框都会被选中,返回的值时 true 或者false

 

 

 

例子3

 

Vue-V-model参数绑定_第4张图片

 

返回值是value的值

 

例子4

 v-model 指令后还可以添加多个参数 (number、lazy、debounce);

 

 lazy

  • 在默认情况下,v-model 在 input 事件中同步输入框的值与数据,我 们们可以添加一个 lazy 特性,从而将数据改到 change 事件中发生

  • 使用 lazy 参数是将双向数据同步的时间节点从 input 触发改为了 change 触发

2. number

  • 当传给后端的字段类型必须是数值的时候,我们可以在 v-model 所在的控件上使用 number 指令,该指令会在用户输入被同步到model 中时将其转换为数值类型
  • 如果原值的转换结果为 NaN,则返回原值 

 

 

 

该文章转载https://blog.csdn.net/WinSolstice/article/details/75172253

你可能感兴趣的:(Vue-V-model参数绑定)