v-model的双向数据绑定(表单)

  可以用 v-model 指令在表单 

  显示效果如下所示:

  

v-model的双向数据绑定(表单)_第2张图片

3、复选框

(1)单个复选框,绑定到布尔值


    

  原本显示false,点击方框后切换为true,显示效果如下所示:

  

v-model的双向数据绑定(表单)_第3张图片  
v-model的双向数据绑定(表单)_第4张图片

(2)多个复选框,绑定到同一个数组


    

Checked names: {{ checkedNames }}

  显示效果如下:

  

v-model的双向数据绑定(表单)_第5张图片

4、单选按钮


    


Picked: {{ picked }}

  显示效果如下:

  

v-model的双向数据绑定(表单)_第6张图片

5、选择框

(1)单选情况


    
Selected: {{ selected }}

  显示效果如下:

  

v-model的双向数据绑定(表单)_第7张图片

  如果 v-model 表达式的初始值未能匹配任何选项,
Selected: {{ selected }}

  显示效果如下所示:

  

v-model的双向数据绑定(表单)_第8张图片

(3)v-for 渲染的动态选项


    
Selected: {{ selected }}

  显示效果如下所示:

  

v-model的双向数据绑定(表单)_第9张图片

二、值绑定

  对于单选按钮,复选框及选择框的选项,v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值):









  显示效果如下所示:

  

v-model的双向数据绑定(表单)_第10张图片

  但是有时我们可能想把值绑定到 Vue 实例的一个动态属性上,这时可以用 v-bind 实现,并且这个属性的值可以不是字符串。

1、复选框


  页面上出现一个选择框,没有点选时,toggle的值为‘no’;点选时,toggle的值为'yes'。

  这里的 true-value 和 false-value 特性并不会影响输入控件的 value 特性,因为浏览器在提交表单时并不会包含未被选中的复选框。如果要确保表单中这两个值中的一个能够被提交,(比如“yes”或“no”),请换用单选按钮。

2、单选按钮

3、选择框的选项

你可能感兴趣的:(vue,js,javascript,html,checkbox)