对于输入框input,直接使用v-model绑定属性即可,该属性需要在data中定义。用法如下:
var vm = new Vue({...data: {content: ""}
})
示例:在输入框中输入内容,该内容显示在输入框下
{{content}}

多行文本textarea直接使用v-model绑定属性即可,该属性在data中定义。具体如下:
var vm = new Vue({...data: {text: ""}
})
示例代码:
{{ text }}

复选框除了要用v-model绑定名称之外,还需要给input传递value值,表示选中之后的值。具体如下:
无论出现几个复选框,这一组复选框的v-model的值都是xxx,value值则根据按钮的内容随意设置。如果是选项组,则在data中要初始化xxx为空数组,如果是单个复选框,初始化为空字符串即可,具体如下:
var vm = new Vue({el: "#app",data: {xxx: [] / ""}
})
示例代码:
苹果香蕉鸭梨爱吃的水果有:{{fruit}}

单选按钮除了要用v-model绑定名称之外,还需要给input传递value值,表示选中之后的值。具体如下:
单选按钮一般是搭配使用的,那么这一组的单选按钮的v-model的值都是xxx,value值则根据按钮的内容随意设置。如果默认选中某个按钮,则xxx需要在data中初始化为该按钮的value值,具体如下:
var vm = new Vue({el: "#app",data: {xxx: "value1" // 表示默认选中value值为value1的选项}
})
示例代码:
OneTwoThree选中的值是:{{number}}

选择器要在select上面使用v-model绑定属性,并且这个属性要在data中进行定义,而option可以选择是否传入value属性,如果传入了value属性,那么属性的值为value值,如果没有传入,属性的值为选项的内容。具体如下:
var vm = new Vue({el: "#app",data: {xxx: ""}
})
示例代码:
选择了:{{hasValue}}

在上面的效果中,我们可以看到,最初的时候选择器是空白的,如果要设置一个默认选项,那么在data中定义的属性值要初始化,有value属性要初始化为value属性,无则初始化为option的内容。
var vm = new Vue({el: "#app",data: {xxx: "value值/option的内容"}
})
示例代码:
选择了:{{hasValue}}

v-model提供了一些修饰符:
| 修饰符 | 说明 |
|---|---|
.number | 将输入的合法符串转为数字 |
.lazy | 监听change事件而不是input |
.trim | 移除输入内容两端空格 |
例如,当收集用户年龄时,类型应该是number,但是input收集的内容是string类型:

这是需要用到.number修饰符,将类型改为number类型:

例如,当输入框会输入很多内容时,v-model会对内容实时进行监视,使用.lazy修饰符可以在内容全部输入完成之后,文本框失去焦点时再获取:
具体内容:{{text}}

上一篇:公积金提取当场到账?黄浦警方成功捣毁一个非法放贷犯罪团伙
下一篇:1 基础知识