vue表单的示例分析
这篇文章给大家分享的是有关vue表单的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
成都创新互联公司是网站建设专家,致力于互联网品牌建设与网络营销，专业领域包括成都网站设计、做网站、成都外贸网站建设公司、电商网站制作开发、小程序开发、微信营销、系统平台开发，与其他网站设计及系统开发公司不同，我们的整合解决方案结合了恒基网络品牌建设经验和互联网整合营销的理念，并将策略和执行紧密结合，且不断评估并优化我们的方案，为客户提供全方位的互联网品牌整合方案！
一、基本用法
你可以用 v-model 指令在表单 及
请选择
javascript
{{option.text}}
var app7 = new Vue({
el: '#app7',
data:{
message: '单行文本',
message1: '多行文本',
picked: true,
sex: 'boy',
hobby: ['爬山','滑雪'],
select: 'css',
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
});
二、值绑定
单选按钮、复选框和选择列表在单独使用或单选的模式下， v-model 绑定的值是一个静态字符串或布尔值， 但在业务中，有时需要绑定一个动态的数据， 这时可以用v-bind 来实现。
一组代码，看完表单常用radio、checkbox、select的值绑定：
{{picked}}
{{value}}
{{toggle}}
{{value1}}
{{value2}}
123
{{selected.number}}
var app8 = new Vue({
el: '#app8',
data:{
picked: false,
value: 'boy',
toggle: false,
value1: 'a',
value2: 'b',
selected: ''
}
});
三、修饰符
与事件的修饰符类似， v-model 也有修饰符，用于控制数据同步的时机。
一组代码，看完常用修饰符lazy、number、trim
{{message}}
{{typeof number}}
{{text}}
var app9 = new Vue({
el: '#app9',
data:{
message: '',
number: '',
text: ''
}
});感谢各位的阅读！关于“vue表单的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
