资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/vue2.0学习笔记（表单输入绑定）

vue2.0学习笔记（表单输入绑定）

Seay / 3341人阅读

摘要：复选框当选中时当没有选中时这里的和特性并不会影响输入控件的特性，因为浏览器在提交表单时并不会包含未被选中的复选框。

1、基础用法

v-model指令可以实现表单元素和Model中数据的双向数据绑定。只能运用在表单元素中（input、radio、text、address、email、select、checkbox、textarea）

可以用 v-model 指令在表单 、 1.3 复选框（checkbox）

单个复选框，绑定到布尔值：

多个复选框，绑定到同一个数组：


  
  
  
  
  
  
  

  Checked names: {{ checkedNames }}



new Vue({
  el: "#example-3",
  data: {
    checkedNames: [ ]
  }
})
1.4 单选按钮（radio） 

  
  
  

  
  
  

  Picked: {{ picked }}



new Vue({
  el: "#example-4",
  data: {
    picked: " "
  }
})
1.5 选择框（selected）

单选时


  
  Selected: {{ selected }}



new Vue({
  el: "#example-5",
  data: {
    selected:  "  "
  }
})

如果 v-model 表达式的初始值未能匹配任何选项，
Selected: {{ selected }}

new Vue({ el: "#example-6", data: { selected: [ ] } })

用 v-for 渲染的动态选项：


Selected: {{ selected }}

new Vue({
  el: "...",
  data: {
    selected: "A",
    options: [
      { text: "One", value: "A" },
      { text: "Two", value: "B" },
      { text: "Three", value: "C" }
    ]
  }
})
2、值绑定

对于单选按钮（radio），复选框(checkbox)及选择框的选项(option)，v-model 绑定的值通常是静态字符串 (对于复选框checkbox也可以是布尔值)：




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

2.1 复选框 


// 当选中时
vm.toggle === "yes"
// 当没有选中时
vm.toggle === "no"

这里的 true-value 和 false-value 特性并不会影响输入控件的 value 特性，因为浏览器在提交表单时并不会包含未被选中的复选框。如果要确保表单中这两个值中的一个能够被提交，(比如“yes”或“no”)，请换用单选按钮。

2.2 单选按钮 

// 当选中时
vm.pick === vm.a
####2.3 选择框的选项####


// 当选中时
typeof vm.selected // => "object"
vm.selected.number // => 123
3、修饰符 3.1 .lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：
3.2 .number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。

3.3 .trim

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

4、在组件上使用v-model

参见自定义输入组件

idc机房托管 专线服务 vue2.0 cdn 表单输入 表单输入框 表单输入项

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

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

相关文章

  • vue.js学习笔记

    摘要：指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于。对象形式佐客汤姆咪口修饰符修饰符是以半角句号指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。修饰符修饰符允许你控制由精确的系统修饰符组合触发的事件。 指令 指令(Directives)是带有v-前缀的特殊属性。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。 v-if条件判断 T...

    levy9527 评论0 收藏0

  • Vue学习笔记（一）

    摘要：一介绍也称为，读音类似，错误读音，由华人尤雨溪开源并维护。隐藏四事件之前说了一些关于事件的指令，这里详细学习一下事件的相关知识。还有一些其他键盘事件，具体参考官方文档。模板就是，用来进行数据绑定，显示在页面中，也称为语法。 一、Vue.js介绍 Vue.js也称为Vue，读音类似view，错误读音v-u-e，由华人尤雨溪开源并维护。 Vue有以下特点： 是一个构建用户界面的框架 是一...

    baoxl 评论0 收藏0

  • Vue学习笔记（一）

    摘要：一介绍也称为，读音类似，错误读音，由华人尤雨溪开源并维护。隐藏四事件之前说了一些关于事件的指令，这里详细学习一下事件的相关知识。还有一些其他键盘事件，具体参考官方文档。模板就是，用来进行数据绑定，显示在页面中，也称为语法。 一、Vue.js介绍 Vue.js也称为Vue，读音类似view，错误读音v-u-e，由华人尤雨溪开源并维护。 Vue有以下特点： 是一个构建用户界面的框架 是一...

    liukai90 评论0 收藏0

  • Vue学习笔记（一）

    摘要：一介绍也称为，读音类似，错误读音，由华人尤雨溪开源并维护。隐藏四事件之前说了一些关于事件的指令，这里详细学习一下事件的相关知识。还有一些其他键盘事件，具体参考官方文档。模板就是，用来进行数据绑定，显示在页面中，也称为语法。 一、Vue.js介绍 Vue.js也称为Vue，读音类似view，错误读音v-u-e，由华人尤雨溪开源并维护。 Vue有以下特点： 是一个构建用户界面的框架 是一...

    rollback 评论0 收藏0

  • 前方来报，八月最新资讯--关于vue2&3的最佳文章推荐

    摘要：哪吒别人的看法都是狗屁，你是谁只有你自己说了才算，这是爹教我的道理。哪吒去他个鸟命我命由我，不由天是魔是仙，我自己决定哪吒白白搭上一条人命，你傻不傻敖丙不傻谁和你做朋友太乙真人人是否能够改变命运，我不晓得。我只晓得，不认命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出处 查看github最新的Vue...

    izhuhaodev 评论0 收藏0

发表评论

登陆后可评论

0条评论

Seay

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<