对于输入框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 基础知识