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 相关文章推荐
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 Javascript
原生JS实现圆环拖拽效果
Apr 07 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
Apr 10 Javascript
微信小程序 input输入及动态设置按钮的实现
Oct 27 Javascript
vue+swiper实现侧滑菜单效果
Dec 28 Javascript
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
vue和better-scroll实现列表左右联动效果详解
Apr 29 Javascript
JavaScript常用内置对象用法分析
Jul 09 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
Sep 25 Javascript
JavaScript鼠标拖拽事件详解
Apr 03 Javascript
Vue组件通信$attrs、$listeners实现原理解析
Sep 03 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
PHP生成自适应大小的缩略图类及使用方法分享
2014/05/06 PHP
Smarty中调用FCKeditor的方法
2014/10/27 PHP
php实现图片转换成ASCII码的方法
2015/04/03 PHP
50款非常棒的 jQuery 插件分享
2012/03/29 Javascript
js判断输入是否为数字的具体实例
2013/08/03 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
JavaScript实现公历转农历功能示例
2017/02/13 Javascript
javascript 面向对象实战思想分享
2017/09/07 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
关于Layui Table隐藏列问题
2019/09/16 Javascript
js实现的在本地预览图片功能示例
2019/11/09 Javascript
[23:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
[01:03:47]VP vs NewBee Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
Python实现从log日志中提取ip的方法【正则提取】
2018/03/31 Python
tensorflow更改变量的值实例
2018/07/30 Python
django 将model转换为字典的方法示例
2018/10/16 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
python返回数组的索引实例
2019/11/28 Python
python线程定时器Timer实现原理解析
2019/11/30 Python
StubHub美国:购买或出售您的门票
2019/07/09 全球购物
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
小学运动会报道稿
2014/10/04 职场文书
个人纪律作风整改措施思想汇报
2014/10/12 职场文书
机关干部四风问题自查报告及整改措施
2014/10/26 职场文书
初婚初育证明范本
2014/11/24 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
余世维讲座观后感
2015/06/11 职场文书
创业计划书详解
2019/07/19 职场文书
读《庄子》有感:美而不自知
2019/11/06 职场文书
python使用XPath解析数据爬取起点小说网数据
2021/04/22 Python
Redis数据结构之链表与字典的使用
2021/05/11 Redis
教你使用Python获取QQ音乐某个歌手的歌单
2022/04/03 Python
未发现nvidia显卡怎么办?Win11系统中未检测到nvidia显卡解决教程
2022/04/08 数码科技