vue radio双向绑定_Vue入门系列：六 v-model 之双向数据绑定

vue使用v-model实现这些标签数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。

v-model 之 input

    Vuejs

{{ msg }}

Vue入门系列：六 v-model 双向数据绑定 input

页面输出

Vue入门系列：六 v-model 双向数据绑定

解析:

v-model 实现双线数据绑定的意思是 不论你是从数据层还是视图层去改变这个值 视图和数据层的数据会同时发生改变.

• 当你在input框里改变hello值的时候,它绑定的msg会自动发生变化.(视图层-->数据层)
• 页面初始化的时候 设置msg=hello 而hello会自动显示在input里面.(数据层-->视图层)

v-model 之 textarea

    Vuejs

{{ msg }}

Vue入门系列：六 v-model 双向数据绑定 textarea

Vue入门系列：六 v-model 双向数据绑定

动态改变文本域里面的数据 下面也会一起发生变化

v-model 之 select

    Vuejs

1234

{{ msg }}

Vue入门系列：六 v-model 双向数据绑定 select

页面输出

当我们改变下拉选项的时候 下面选择的结果也会对应发生变化

另外 checkbox radio 等表单元素大家可以自行尝试