v-model具有双向数据绑定的功能,可以绑定数组和字符串,不过,在绑定之前,需要将我们需要绑定的数据进行初始化。
1.当输入框的值改变时,{{value}}中的值会跟着改变

//html
 <input type="text" v-model="value" value="apple"/>
    {{value}}
//data
data () {
  value: ''
}

2.input为checkbox时,点击勾选框,v-model会自动将value值添加到valueArr中

//html
 <input type="checkbox" v-model="valueArr" value="apple"/>
 <input type="checkbox" v-model="valueArr" value="orange"/>
 <input type="checkbox" v-model="valueArr" value="banana"/>{{valueArr}}
//data
data () {
  valueArr: []
}

结果图
这里写图片描述
3.当input为单选按钮时
v-model会获取当前一个value或者valueArr的值,然后渲染到页面中

    <input type="radio" v-model="value" value="apple"/>
    <input type="radio" v-model="value" value="orange"/>
    <input type="radio" v-model="value" value="banana"/>{{value}}

结果图
这里写图片描述

4.v-model中的修饰符
v-model.lazy: 是在输入完成或者失去焦点或者回车之后执行
v-model.trim: 去掉输入框的中的空格
v-model.number: 当输入的是‘11111’,会value自动转变为number类型

Logo

前往低代码交流专区

更多推荐