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 相关文章推荐
wordpress之js库集合研究介绍
Aug 17 Javascript
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
Mar 18 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
Dec 13 Javascript
js控制容器隐藏出现防止样式变化的两种方法
Apr 25 Javascript
Jquery中扩展方法extend使用技巧
Aug 24 Javascript
修复bash漏洞的shell脚本分享
Dec 31 Javascript
jQuery实现表格颜色交替显示的方法
Mar 09 Javascript
JavaScript中闭包的写法和作用详解
Jun 29 Javascript
Javascript 闭包详解及实例代码
Nov 30 Javascript
Vue.js学习之过滤器详解
Jan 22 Javascript
vue脚手架中配置Sass的方法
Jan 04 Javascript
vue开发移动端底部导航条功能
Apr 08 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 XML操作的各种方法解析(比较详细)
2010/06/17 PHP
mysql,mysqli,PDO的各自不同介绍
2012/09/19 PHP
php缓存技术详细总结
2013/08/07 PHP
CodeIgniter错误mysql_connect(): No such file or directory解决方法
2014/09/06 PHP
PHP 实现缩略图
2021/03/09 PHP
jquery 获取json数据实现代码
2009/04/27 Javascript
jquery radio 操作代码
2011/03/16 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
2013/11/18 Javascript
在每个匹配元素的外部插入新元素的方法
2013/12/20 Javascript
用Jquery实现滚动新闻
2014/02/12 Javascript
node.js中的http.createClient方法使用说明
2014/12/15 Javascript
JavaScript判断数字是否为质数的方法汇总
2016/06/02 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
AngularJS 视图详解及示例代码
2016/08/17 Javascript
javascript实现动态显示颜色块的报表效果
2017/04/10 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
2017/11/10 Javascript
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
浅谈React 服务器端渲染的使用
2018/05/08 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
原生js实现移动端Touch轮播图的方法步骤
2019/01/03 Javascript
使用vue打包进行云服务器上传的问题
2020/03/02 Javascript
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
JavaScript实现音乐导航效果
2020/11/19 Javascript
原生js实现自定义难度的扫雷游戏
2021/01/22 Javascript
go和python调用其它程序并得到程序输出
2014/02/10 Python
python实现的阳历转阴历(农历)算法
2014/04/25 Python
深入源码解析Python中的对象与类型
2015/12/11 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
python 下载文件的几种方法汇总
2021/01/06 Python
旅游管理专业学生求职信
2013/09/28 职场文书
《第一次抱母亲》教学反思
2014/04/16 职场文书
个人思想政治总结
2015/03/05 职场文书
工作态度怎么写
2015/06/25 职场文书
七一慰问简报
2015/07/20 职场文书
python如何利用cv2模块读取显示保存图片
2021/06/04 Python
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL