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

Tikitoo 发布于2019-08-21 12:05 / 3014人阅读

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

表单输入绑定 基础用法

我们可以利用 v-model 指令来实现数据与模版的双向绑定,它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。

v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值。因为它会选择 Vue 实例数据来作为具体的值。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

文本


    {{msg}}

var vm = new Vue({
    el:"#box",
    data:{
        msg:"hi girl"
    }
})

结果

多行文本


    {{msg}}

var vm = new Vue({
    el:"#box",
    data:{
        msg:"hi girl"
    }
})

结果

复选框

var vm = new Vue({
    el:"#box",
    data:{
        msg:true
    }
})

结果

单选


    
    One
    

    
    Two
    

    Picked: {{ picked }}

var vm = new Vue({
    el:"#box",
    data:{
        picked:""
    }
})

结果

选择列表


    
    Selected: {{ selected }}

var vm = new Vue({
    el:"#box",
    data:{
        selected: ""
    }
})

结果

如果 v-model 表达初始的值不匹配任何的选项，< select > 元素就会以”未选中”的状态渲染。在 iOS 中，这会使用户无法选择第一个选项，因为这样的情况下，iOS 不会引发 change 事件。因此，像以上提供 disabled 选项是建议的做法。
多选列表（绑定到一个数组）：


    
    

    Selected: {{ selected }}

var vm = new Vue({
    el:"#box",
    data:{
        selected: []
    }
})

结果

绑定 value

对于单选按钮，勾选框及选择列表选项， v-model 绑定的 value 通常是静态字符串（对于勾选框是逻辑值）：

但是有时我们想绑定 value 到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。

复选框

// 当选中时
vm.toggle === vm.a
// 当没有选中时
vm.toggle === vm.b

单选按钮

// 当选中时
vm.pick === vm.a

选择列表设置

// 当选中时
typeof vm.selected // => "object"
vm.selected.number // => 123

修饰符

.lazy

.number

.trim

.lazy

在默认情况下， v-model 在 input 事件中同步输入框的值与数据 (除了上述 IME 部分)，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：

.number

如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：

这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。

.trim

如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：

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

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

Vue.js-表单与v-model

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

jollywing 2019-08-23 16:02 评论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
手把手教你学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