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 18 Javascript
js 获取浏览器高度和宽度值(多浏览器)
Sep 02 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
Sep 14 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
Sep 14 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
Mar 19 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
Jul 09 Javascript
javascript父子页面通讯实例详解
Jul 17 Javascript
解析JavaScript中的字符串类型与字符编码支持
Jun 24 Javascript
JavaScript表单验证实现代码
May 22 Javascript
深入理解vue Render函数
Jul 19 Javascript
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
详解如何使用babel进行es6文件的编译
May 29 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模拟HTTP认证
2006/10/09 PHP
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
PHP使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
详解PHP中的状态模式编程
2015/08/11 PHP
Twig模板引擎用法入门教程
2016/01/20 PHP
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
php自定义函数实现二维数组排序功能
2016/07/20 PHP
在IE模态窗口中自由查看HTML源码的方法
2007/03/08 Javascript
jscript之List Excel Color Values
2007/06/13 Javascript
Jquery Ajax.ashx 高效分页实现代码
2009/10/20 Javascript
jquery.validate使用攻略 第三部
2010/07/01 Javascript
JS在textarea光标处插入文本的小例子
2013/03/22 Javascript
jQuery实现可收缩展开的级联菜单实例代码
2013/11/27 Javascript
推荐10 款 SVG 动画的 JavaScript 库
2015/03/24 Javascript
javascript模拟命名空间
2015/04/17 Javascript
js获取鼠标位置实例详解
2015/12/09 Javascript
AngularJS基础 ng-options 指令详解
2016/08/02 Javascript
JS点击缩略图整屏居中放大图片效果
2017/07/04 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
2018/01/09 Javascript
微信小程序云开发之新手环境配置
2019/05/16 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
layer弹出层取消遮罩的方法
2019/09/25 Javascript
vue导入.md文件的步骤(markdown转HTML)
2020/12/31 Vue.js
Python selenium如何设置等待时间
2016/09/15 Python
分享6个隐藏的python功能
2017/12/07 Python
python实现学生信息管理系统
2020/04/05 Python
Python selenium抓取微博内容的示例代码
2018/05/17 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
Django如何使用redis作为缓存
2020/05/21 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
Python基于time模块表示时间常用方法
2020/06/18 Python
用python绘制樱花树
2020/10/09 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
Under Armour美国官网:美国知名高端功能性运动品牌
2016/09/05 全球购物
精选奢华:THE LIST
2019/09/05 全球购物
店长助理岗位职责
2013/12/13 职场文书