Vue.js-表单与v-model

jollywing 发布于2019-08-23 16:02 / 1702人阅读

摘要：学习笔记表单与表单与提供了指令，用于在表单类元素上双向绑定数据。事实上，也是一个特殊的语法糖，只不过它会在不同的表单上智能处理。选择的项复选框复选框多带带使用时，也是用绑定一个布尔值。复选框选择列表当选中时，是一个，所以。

学习笔记：表单与v-model

表单与v-model

Vue.js提供了v-model指令，用于在表单类元素上双向绑定数据。

使用v-model后，表单控件显示的值只依赖所绑定的数据，不再关心初始化时的value属性，对于在之间插入的值，也不会生效。

使用v-model时，如果是用中文输入法输入中文，一般在没有选定词组前，也就是在拼音阶段，Vue时不会更新数据的，当敲下汉字时才会触发更新。

如果希望总是实时更新，可以用@input替代v-model。事实上，v-model也是一个特殊的语法糖，只不过它会在不同的表单上智能处理。

单选按钮

单选按钮在多带带使用时，不需要v-model，直接使用v-bind把你当一个布尔类型的值，为真时选中，为否时不选。


    
    单选按钮

如果是组合使用来实现互斥选择的效果，就需要v-model配合value来使用。


    
        
        HTML
    
    
        
        JavaScript
    
    
        
        CSS
    
    选择的项：{{picked}}

复选框

复选框多带带使用时，也是用v-model绑定一个布尔值。

组合使用时，也是v-model与value一起，多个勾选框都绑定到同一个数组类型的数据，value的值在数组中，就会选中这一项。这一过程也是双向的，在勾选时value得知也会自动push到这个数组中。

选择列表

选择列表就是下来选择器，分为单选和多选两种方式。

在业务中，经常用v-for动态输出，value和text也是用v-bind动态输出。

绑定值

在业务中，有时需要绑定一个动态的数据，这时可以使用v-bind实现。

单选按钮


    
    {{picked}}
    {{value}}


data: {
    picked: false,
    value: 123
},

在选中时，app.picked===app.value，值都是123。

复选框


    
    {{toggle}}
    {{value1}}
    {{value2}}

选择列表


    
    {{selected.number}}

当选中时，app.selected是一个Object，所以app.selected.number===123。

修饰符

与事件的修饰符类似，v-model也有修饰符，用于控制数据同步的时机。

.lazy

在输入框中，v-model默认是在input事件中同步输入框的数据，使用修饰符.lazy会转变为在change事件中同步。


    
    {{message}}

这时，message并不是实时变化，而是在失焦或按回车键时才更新。

.number

使用修饰符.number可以将输入转换成Number类型，否则输入的数字，但它的类型其实是String，在数字输入框时比较有用。


    
    {{typeof message}}

.trim

修饰符.trim可以自动过滤输入的首尾空格。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102639.html

Vue.js的v-model(表单输入)

摘要：表单输入绑定基础用法我们可以利用指令来实现数据与模版的双向绑定它会根据控件类型自动选取正确的方法来更新元素。会忽略所有表单元素的特性的初始值。如果要自动过滤用户输入的首尾空格，可以添加修饰符到上过滤输入表单输入绑定基础用法我们可以利用 v-model 指令来实现数据与模版的双向绑定,它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖...

Tikitoo 2019-08-21 12:05 评论0 收藏0
Vue.js第八课表单

摘要：你可以用指令在表单控件元素上创建双向数据绑定。会根据控件类型自动选取正确的方法来更新元素。如果要自动过滤用户输入的首尾空格，可以添加修饰符到上过滤输入这节我们为大家介绍 Vue.js 表单上的应用。你可以用 v-model 指令在表单控件元素上创建双向数据绑定。showImg(https://segmentfault.com/img/bVOfeD?w=700&h=372); v-m...

weizx 2019-06-27 16:36 评论0 收藏0
Vue.js组件中v-model的使用

摘要：在中，经常会使用实现表单的双向数据绑定功能。使用组件时，组件库中的含有输出类型的自定义组件，都会使用指令，该指令绑定的元素就是组件的输出结果。在 Vue.js 中，经常会使用 v-model 实现表单的双向数据绑定功能。使用 Element 组件时，组件库中的含有输出类型的自定义组件，都会使用v-model指令，该指令绑定的元素就是组件的输出结果。比如 select选择器 show...

calx 2019-08-21 15:49 评论0 收藏0
iView2 来了，全面支持 Vue.js 2.x

摘要：来了两个星期的紧张开发，终于发布了支持的版本。整体性能也大幅度提升。报名费用元，报名地址微信扫描二维码更新日志目前已发布至，文档还需一段时间，但很快会发布新版本的来支持。 showImg(https://segmentfault.com/img/remote/1460000008640063?w=1600&h=900); iView2 来了两个星期的紧张开发，iView 终于发布了支...

YFan 2019-08-21 11:34 评论0 收藏0
手把手教你学Vue-1(vue指令)

摘要：方法用来新增对象的属性模版指令不是字符串模版渲染，所以需要用来渲染菜鸟教程属性中的值应使用指令缩写方式。最近因为要重构APP项目，在对比了react和Vue，加上前期已经有了react开发的经验，还是想尝试一下VUE，更小更便捷的开发方式。 1.vue 初始化安装官网提供的NPM方法 $ npm install vue # 全局安装 vue-cli $ npm install ...

LucasTwilight 2019-08-22 15:47 评论0 收藏0