vue中v-model的应用及使用详解


Posted in Javascript onJune 27, 2018

vue中经常使用到<input>和<textarea>这类表单元素,vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别。vue使用v-model实现这些标签数据的双向绑定,它会根据控件类型自动选取正确的方法来更新元素。

    v-model本质上是一个语法糖。如下代码<input v-model="test">本质上是<input :value="test" @input="test = $event.target.value">,其中@input是对<input>输入事件的一个监听:value="test"是将监听事件中的数据放入到input,下面代码是v-model的一个简单的例子。在这边需要强调一点,v-model不仅可以给input赋值还可以获取input中的数据,而且数据的获取是实时的,因为语法糖中是用@input对输入框进行监听的。可以在如下div中加入<p>{{ test}}</p>获取input数据,然后去修改input中数据会发现<p></p>中数据随之改变。

<div id="app">
  <input v-model="test">
  <!-- <input :value="test" @input="test= $event.target.value"> --><!--语法糖-->
</div>
<script src="/resources/js/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      test: '这是一个测试'
    }
  });
</script>

1.v-model在input的下拉框、单选按钮、复选框中的应用

    如下面代码,分别是v-model在input不同的组件中的应用,但是大体用法相同。注意:像下面代码中复选框这样需要接收多条数据的情况下,在data里面应该由数组与其对应二不是字符串。

    这里有一个值绑定的问题,不管是下拉框或者单选按钮还是复选框,我们都可以在对应的标签内设置value。以下拉框为例,我们在<option>中添加了vulue=“A被选”,当我们选择第一个下拉框A的时候,在selected中的字符串为‘A被选',如果我们不在<option>中设置value值的话那么selected中的字符串将是<option>中的值‘A'。

    这里还有一个和vue无关的问题,比较简单,但是由于平时主要做后台java开发没太注意这个前端问题。以下面的单选按钮代码为例,<label>标签内有一个for元素与input中的id值对应(两个值相同),刚开始不太理解为什么这么写,这个对前端人员来说应该是一个很简单的问题。这样写的目的没有其它任何作用,只是label元素为鼠标改进了可用性,在点击label的时候也相当于点击了对应的input控件,点击label标签也可以触发input标签控件。例如单选按钮在加了for之后点击small也可以选择对应按钮,但是如果不加for是没有任何反应的。

<!--下拉框-->
<div id="app">
  <select v-model="selected">
    <option value="A被选">A</option>
    <option value="B被选">B</option>
    <option value="C被选">C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>
<script src="/resources/js/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      selected: ''
    }
  });
</script>

<!--单选按钮-->
<div id="app">
  <input type="radio" id="small" value="small_value" v-model="picked">
  <label for="small">small</label>
  <br>
  <input type="radio" id="big" value="big_value" v-model="picked">
  <label for="big">big</label>
  <br>
  <span>Picked: {{ picked }}</span>
</div>
<script src="/resources/js/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      picked: ''
    }
  })
</script>

<!--复选框-->
<div id="app">
  <input type="checkbox" id="one" value="value_one" v-model.lazy="checkedNames">
  <label for="one">选项一</label>
  <input type="checkbox" id="two" value="value_two" v-model.lazy="checkedNames">
  <label for="two">选项二</label>
  <input type="checkbox" id="three" value="value_three" v-model.lazy="checkedNames">
  <label for="three">选项三</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>
<script src="/resources/js/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      checkedNames: []
    }
  })
</script>

2.v-model修饰符

    v-model也可以和.lazy、.trim和.number这些修饰符一起使用。

<!-- 在每次 input 事件触发后将输入框的值与数据进行同步,添加 lazy 修饰符,从而转变为使用 change 事件进行同步 -->
  <input v-model.lazy="msg" >
  <!--去除字符串首尾的空格-->
  <input v-model.trim="msg">
  <!--将数据转化为值类型-->
  <input v-model.number="age" type="number">

    .trim和.number的用法比较简单,这里就不做过多解释。.lazy相当于一个延迟加载的过程。在上面我们讲过<input v-model="test">相当于一个语法糖<input :value="test" @input="test = $event.target.value">,<input v-model.lazy="msg" >则相当将input的实时更新改为一个change事件,v-model.lazy只有当焦点移除input时才会触发事件。下图1位v-model效果,图2位v-model.lazy效果。

vue中v-model的应用及使用详解

下面在单独给大家介绍下vue中v-model使用

v-model用于表单数据的双向绑定,其实它就是一个语法糖,这个背后就做了两个操作:

  1. v-bind绑定一个value属性

  2. v-on指令给当前元素绑定input事件

自定义组件使用v-model,应该有以下操作:

1. 接收一个value prop

2. 触发input事件,并传入新值

在原生表单元素中:

<input v-model="inputValue">

相当于

<input v-bind:value="inputValue" v-on:input="inputValue = $event.target.value">

在自定义组件中

<my-component v-model="inputValue"></my-component>

相当于

<my-component v-bind:value="inputValue" v-on:input="inputValue = argument[0]"></my-component>

这个时候,inputValue接受的值就是input事件的回调函数的第一个参数,所以在自定义组件中,要实现数据绑定,还需要$emit去触发input的事件。

this.$emit('input', value)

总结

以上所述是小编给大家介绍的vue中v-model的应用及使用详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js变量作用域及可访问性的探讨
Nov 23 Javascript
jquery 插件学习(六)
Aug 06 Javascript
jquery异步跨域访问代码
Jun 28 Javascript
javascript面向对象之定义成员方法实例分析
Jan 13 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
May 13 Javascript
Javascript仿京东放大镜的效果
Mar 01 Javascript
使用canvas进行图像编辑的实例
Aug 29 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
Oct 27 Javascript
详解Vue.js使用Swiper.js在iOS
Sep 10 Javascript
详解在网页上通过JS实现文本的语音朗读
Mar 28 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
Apr 28 Javascript
VUE中使用HTTP库Axios方法详解
Feb 05 Javascript
JS基于封装函数实现的表格分页完整示例
Jun 26 #Javascript
Vue实现todolist删除功能
Jun 26 #Javascript
AngularJS实现动态切换样式的方法分析
Jun 26 #Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
Jun 26 #Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 #jQuery
在vue中使用公共过滤器filter的方法
Jun 26 #Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 #Javascript
You might like
ThinkPHP采用模块和操作分析
2011/04/18 PHP
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
新浪SAE云平台下使用codeigniter的数据库配置
2014/06/12 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
PHP receiveMail实现收邮件功能
2018/04/25 PHP
laravel 操作数据库常用函数的返回值方法
2019/10/11 PHP
JavaScript插件化开发教程 (一)
2015/01/27 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
JavaScript实现全选取消效果
2017/12/14 Javascript
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
2020/03/17 Javascript
[41:08]TNC vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python深入学习之内存管理
2014/08/31 Python
Python实现树莓派WiFi断线自动重连的实例代码
2017/03/16 Python
python编写微信远程控制电脑的程序
2018/01/05 Python
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
python+ffmpeg视频并发直播压力测试
2018/03/06 Python
python opencv旋转图像(保持图像不被裁减)
2018/07/26 Python
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
python批量下载网站马拉松照片的完整步骤
2018/12/05 Python
如何在Django配置文件里配置session链接
2019/08/06 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
python模式 工厂模式原理及实例详解
2020/02/11 Python
详解pycharm2020.1.1专业版安装指南(推荐)
2020/08/07 Python
详解CSS3中@media的实际使用
2015/08/04 HTML / CSS
Html5实现单张、多张图片上传功能
2019/04/28 HTML / CSS
html5 canvas手势解锁源码分享
2020/01/07 HTML / CSS
全球最大的在线橄榄球商店:Lovell Rugby
2018/05/20 全球购物
学习十八大精神心得体会
2013/12/31 职场文书
大学生学习自我评价
2014/01/13 职场文书
上课打牌的检讨书
2014/02/15 职场文书
村主任群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
护士岗位竞聘书
2015/09/15 职场文书
基于PyQt5制作一个群发邮件工具
2022/04/08 Python