一、基础用法


你可以用 v-model 指令在表单 <input><textarea> 元素上创建双向数据绑定。它会根据控件类型自动选择正确的方法来更新元素。

尽管有些神奇,但 v-model 本质上不过是语法糖。它不择监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。

注意: v-model 会忽略所有表单元素的 valuecheckedselected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过JavaScript在组件的 data 选项中声明初始值。

注意:对于需要使用输入法(如中文、日文、韩文等)的语言,你会发现 v-model 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程,请使用 input 事件。

1.1文本

 <input v-model="message" placeholder="edit me">                                HTML
 <p>Message is: {{ message }}</p>

结果:

1.2多行文本

 <span>Multiline message is:</span>                                        HTML
 <p style="white-space: pre-line;">{{ message }}</p>
 <br>
 <textarea v-model="message" placeholder="add multiple lines"></textarea>

结果:

注意:在文本区域插值(<textarea></textarea>)并不会生效,应用 v-model 来代替。

1.3复选框

单个复选框,绑定到布尔值:

 <input type="checkbox" id="checkbox" v-model="checked">                           HTML
 <label for="checkbox">{{ checked }}</label>

结果:

1.3.1多个复选框,绑定到同一个数组

 <div id='example-3'>                                                HTML
   <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
   <label for="jack">Jack</label>
   <input type="checkbox" id="john" value="John" v-model="checkedNames">
   <label for="john">John</label>
   <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
   <label for="mike">Mike</label>
   <br>
   <span>Checked names: {{ checkedNames }}</span>
 </div>
 new Vue({                                                       JS
   el: '#example-3',
   data: {
     checkedNames: []
   }
 })

结果:

1.4单选按钮

 <div id="example-4">                                                HTML
   <input type="radio" id="one" value="One" v-model="picked">
   <label for="one">One</label>
   <br>
   <input type="radio" id="two" value="Two" v-model="picked">
   <label for="two">Two</label>
   <br>
   <span>Picked: {{ picked }}</span>
 </div>
 new Vue({                                                       JS
   el: '#example-4',
   data: {
     picked: ''
   }
 })

结果:

1.5选择框

单选时:

 <div id="example-5">                                               HTML
   <select v-model="selected">
     <option disabled value="">请选择</option>
     <option>A</option>
     <option>B</option>
     <option>C</option>
   </select>
   <span>Selected: {{ selected }}</span>
 </div>
 new Vue({                                                      JS
   el: '...',
   data: {
     selected: ''
   }
 })

结果:

注意:如果 v-model 表达式的初始值未能匹配任何选项,<select> 元素将被渲染为"未选中"状态。在IOS中,这回使用户无法选择第一个选项。因为这样的情况下,IOS不会触发change事件。因此,更推荐像上面这样提供一个值为空的禁用选项。

多选时(绑定到同一个数组)

 <div id="example-6">                                                HTML
   <select v-model="selected" multiple style="width: 50px;">
     <option>A</option>
     <option>B</option>
     <option>C</option>
   </select>
   <br>
   <span>Selected: {{ selected }}</span>
 </div>
 new Vue({                                                       JS
   el: '#example-6',
   data: {
     selected: []
   }
 })

结果:

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

 <select v-model="selected">                                            HTML
   <option v-for="option in options" v-bind:value="option.value">
     {{ option.text }}
   </option>
 </select>
 <span>Selected: {{ selected }}</span>
 new Vue({                                                       JS
   el: '...',
   data: {
     selected: 'A',
     options: [
       { text: 'One', value: 'A' },
       { text: 'Two', value: 'B' },
       { text: 'Three', value: 'C' }
     ]
   }
 })

结果:

二、值绑定


对于单选按钮,复选框及选择框的选项, v-model 绑定的值通常是静态字符串(对于复选框也可以是布尔值):

 <!-- 当选中时,`picked` 为字符串 "a" -->                                     HTML
 <input type="radio" v-model="picked" value="a">

 <!-- `toggle` 为 true 或 false -->
 <input type="checkbox" v-model="toggle">

 <!-- 当选中第一个选项时,`selected` 为字符串 "abc" -->
 <select v-model="selected">
   <option value="abc">ABC</option>
 </select>

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

2.1复选框

 <input                                                        HTML
   type="checkbox"
   v-model="toggle"
   true-value="yes"
   false-value="no"
 >
 // 当选中时                                                      JS
 vm.toggle === 'yes'
 // 当没有选中时
 vm.toggle === 'no'

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

2.2单选按钮

 <input type="radio" v-model="pick" v-bind:value="a">                             HTML
 // 当选中时                                                       JS
 vm.pick === vm.a

2.3选择框的选项

 <select v-model="selected">                                            HTML
     <!-- 内联对象字面量 -->
   <option v-bind:value="{ number: 123 }">123</option>
 </select>
 // 当选中时                                                       JS
 typeof vm.selected // => 'object'
 vm.selected.number // => 123

三、修饰符


.lazy

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

 <!-- 在“change”时而非“input”时更新 -->                                      HTML
 <input v-model.lazy="msg" >

.number

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

 <input v-model.number="age" type="number">                                  HTML

这通常很有用,因为即使在 type="number" 时,HTML输入元素的值也总会返回字符串。

.trim

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

 <input v-model.trim="msg">                                            HTML

四、在组件上使用 v-model


PS:如果你还不熟悉Vue的组件,可以暂且跳过这里。

HTML原生的输入元素类型并不总能满足需求。型号,Vue的组件系统允许你创建具有完全自定义行为且可复用的输入组件。这些输入组件甚至可以和 v-model 一起使用! 要了解更多,请参考组件指南中的自定义输入组件。

vue基础——表单输入绑定的更多相关文章

  1. vue基础---表单输入绑定

    [一]基础用法 用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取正确的方 ...

  2. 前端框架之Vue(8)-表单输入绑定

    基础用法 你可以用 v-model 指令在表单 <input> . <textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取正确 ...

  3. vue 之 表单输入绑定

    vue的核心:声明式的指令和数据的双向绑定. 那么声明式的指令,已经给大家介绍完了.接下来我们来研究一下什么是数据的双向绑定? 另外,大家一定要知道vue的设计模式:MVVM M是Model的简写,V ...

  4. 一起学Vue之表单输入绑定

    在Vue进行前端开发中,表单的输入是基础且常见的功能,本文以一个简单的小例子,简述v-model数据绑定的用法,仅供学习分享使用,如有不足,还请指正. 基础用法 你可以用 v-model 指令在表单 ...

  5. vue的表单输入绑定

    1.单行绑定 <p>{{logintype}}</p> <input type="text" v-model="logintype" ...

  6. vue之表单输入绑定

  7. Vue学习计划基础笔记(五) - 表单输入绑定、组件基础

    表单输入绑定.组件基础 目标: 熟练掌握vue中表单的处理方式 对之前学习的内容简单回顾一下,并写一个实例,学以致用(最好脱离文档) vue中表单的处理方式 vue中表单的处理使用了v-model指令 ...

  8. Blazor和Vue对比学习(基础1.9):表单输入绑定和验证,VeeValidate和EditFrom

    这是基础部分的最后一章,内容比较简单,算是为基础部分来个HappyEnding.我们分三个部分来学习: 表单输入绑定 Vue的表单验证:VeeValidate Blazor的表单验证:EditForm ...

  9. Vue.js教程--基础2(事件处理 表单输入绑定

    事件处理 表单输入绑定 事件处理 监听v-on 监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 可以在v-on:click=''加内联语句. 有时也需要在内联语句处理器中访问原始 ...

随机推荐

  1. IBM DS存储存储性能调优

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/jaminwm/article/details/26458791 ibm存储适用,其它存储有相似參数. ...

  2. 基于windows IIS的C语言CGI WEB服务器环境搭建

    网页编程对我来说特别亲切,因为我就是从html.ASP.PHP一步步接触编程的.自己的编程爱好也是从那里一点一点被满足.不过离开大学之后很久没有碰过WEB了,最近看到嵌入式中的涉及到的web服务器,了 ...

  3. JSON.stringify、JSON.parse、toJSON 区别

    JSON.stringify 方法 将一个 JavaScript 值转换为一个 JSON 字符串 可以将数组.对象等转换后的 JSON 字符串,保存在 sessionStorage.localStor ...

  4. spring 自带框架及可替换框架

    spring 自带框架 可替换框架 (可替换框架)是否推荐使用 spring security shiro 推荐使用 spring aop aspectj 集成aspectj使用 Shiro 对比 S ...

  5. netty SimpleChannelInboundHandler<Message>和ChannelInboundHandlerApter

    一个兄弟的测试体验:https://blog.csdn.net/linuu/article/details/51307060 比较官方:https://www.imooc.com/article/28 ...

  6. REDHAT中的iptable设置(nginx或者apache80端口访问不了解决)转 亲测

    来自:http://johnnychenjun.blog.163.com/blog/static/137493406201010284598972/ 查看当前防火墙里的状态:#/etc/init.d/ ...

  7. Hadoop高级培训课程大纲-管理员版

    一.课程概述 本次培训课程主要面向大数据系统管理人员和开发设计人员,基于开源社区大数据应用最活跃的Hadoop和HBase技术框架.围绕分布式文件存储(HDFS).分布式并行计算(Map/Recue) ...

  8. 多线程执行顺序诡异现象谈,你不知道的pthread_create

    引文:学而时习之,不亦说乎.总是忙于具体项目,业务功能的实现:关于编程本身的技能都要有些生疏了,于是就选择了几个专题做了一次温习,重点放在了多线程和多进程上,跑了一个实例,居然有新的发现: (1)多个 ...

  9. 用过的sql 工具

    sequel pro 港优创新 php myadmin 腾讯

  10. make -j [N] --jobs [=N] 增加效率

    阿里云的服务器,以前是最低配1核心cpu,make的时候非常慢.升级配置以后,发现make的效率丝毫没有增加.top命令查看发现cpu的利用率非常低,于是执行命令: make --help 在显示的结 ...