详解vue中v-model和v-bind绑定数据的异同


Posted in Javascript onAugust 10, 2020

vue的模板采用DOM模板,也就是说它的模板可以当做DOM节点运行,在浏览器下不报错,绑定数据有三种方式,一种是插值,也就是{{name}}的形式,一种是v-bind,还有一种是v-model。{{name}}的形式比较好理解,就是以文本的形式和实例data中对应的属性进行绑定。比如:

var app = new Vue({
 el: '#app',
 template: '<div @click="toggleName">{{name}}</div>',
 data: {
 name: 'tom',
 },
 method: {
 toggleName() {
 this.name = this.name === 'tom' ? 'sony' : 'tom'
 },
 },
})

上面的字符串模板中,有一个{{name}},它和data.name是绑定的,当data.name发生变化时,视图也发生变化。

但是v-bindv-model这两种绑定比较难区分,特别是在表单元素中,刚开始会混淆到底应该怎么使用。

v-bind

首先来看下v-bind,它的用法是后面加冒号,跟上html元素的attributions,例如:

<p v-bind:class="classed">

这里的v-bind:class会产生什么效果呢?实际上,首先你可以看下如果不加v-bind:,也就是:<p class="classed">,这只是一个普通的p元素,含有一个.classed的类,没有任何数据参与进来。

当加上v-bind:之后,就不一样了。它的值classed不是字符串,而是vue实例对应的data.classed的这个变量。也就是说data.classed是什么值,它就会给class属性传递什么值,当data.classed发生变化的时候,class属性也发生变化,这非常适合用在通过css来实现动画效果的场合。除了class,其他大部分html原始的属性都可以通过这种方式来绑定,而且为了方便,它可以直接缩写成冒号形式,例如:

var app = Vue({
 el: '#app',
 template: '<img :src="src">',
 data: {
 src: '',
 },
 beforeMount() {
 fetch(...).then(...).then(res => this.src = res.src) // 这里修改了data.src
 },
})

上面这段代码中,默认情况下data.src是空字符串,也就说不会有图片显示出来,但是当从远端获取到图片地址之后,更新了data.src,图片就会显示出来了。

v-model

v-model主要是用在表单元素中,它实现了双向绑定。双向绑定大家都非常熟了,简单的说就是默认情况下,它跟上面两种情况的数据绑定是一样的,实例的data.name发生变化的时候,对应的试图中也会发生变化。但是v-model绑定后,它还会反过来,在input中手动输入新的内容,会反过来修改data.name的值,如果在视图中其他地方使用到了data.name,那么这个地方就会因为data.name的变化而变化,从而实现关联动态效果。下面来举个栗子:

var app = Vue({
 el: '#app',
 template: '<label><input v-model="name">{{name}}</label>',
 data: {
 name: '',
 },
})

上面<input>中绑定了name,那么当input的value发生变化时,data.name就会跟着发生变化,而data.name变化了{{name}}的地方也会跟着变化。

v-model是一种双向绑定,那么也就是说,你绑定的元素得有机会改变值。所以实际上v-model基本上只会用在input, textarea, select这些表单元素上。

v-bind和v-model混用

有一些情况我们需要v-bind和v-model一起使用。这个时候如果不留神,就会搞乱状况,分不清哪里应该怎么控制。举个栗子:

<input :value="name" v-model="body">

上面就是一个栗子。data.name和data.body,到底谁跟着谁变呢?甚至,它们会不会产生冲突呢?

实际上它们的关系和上面的阐述是一样的,v-bind产生的效果不含有双向绑定,所以:value的效果就是让input的value属性值等于data.name的值,而v-model的效果是使input和data.body建立双向绑定,因此首先data.body的值会给input的value属性,其次,当input中输入的值发生变化的时候,data.body还会跟着改变。

现在的问题是,当这两个一起使用的时候,谁都优先级高?谁会无效?实验证明,v-model将会被使用,v-bind这个时候无效了,因为它正好绑定在value属性上,如果绑在其他属性上v-bind是不受影响的。在这种情况下,v-bind失效,即使你修改data.name,input里面不会有任何变化。

这也说明,v-model建立的双向绑定对输入型元素input, textarea, select等具有优先权,会强制实行双向绑定,如果你愿意的话。
这说明,在单独的input中,同时使用v-bind和v-model是没有必要的,虽然不会造成冲突。

注意上面我说道“单独”,也就是说,在一组输入中,它们又要另当别论。一组输入包括单选组、复选组、下拉选项、下拉选项组。

<label for="value in options">
 <input type="checkbox" :value="value" v-model="selected">
</label>

在data中,它们是这样的:

data: {
 options: [1, 2, 3, 4, 5],
 selected: [],
}

一组复选框,或者一组下拉选项组,也就是select mutiple="true"的情况,它们的结果是一个数组,而非单个值,因此data.selected是一个数组,当一个选项被选中之后,这个选项的value值会被加入到data.selected中(不是按options里面的顺序,而是操作过程中的逻辑)。这个时候:value就是有效的,因为它表示把options数组中对应的选项值传递给value,并不是双向绑定的意思,而只是传值过去(当然,当options中对应的值发生变化时,value值也会变化)。相当于说,v-bind负责value的值,v-model负责选中状态。当然,v-model是双向绑定,界面上你去勾选会影响data.selected的值,你在程序中操作了data.selected,也会反过来影响界面。v-model影响的是勾选效果,而v-bind影响的是值。(实际上,v-bind虽然只是影响值,但是也会影响勾选效果,比如本来一个选框是被勾选的,通过v-bind绑定值发生了变化,那么新来的值就不会在data.selected中,这个选项就不会被勾选。如果没有被勾选,改变后的值又在data.selected中,那又会被勾选上。)

注意,只有当type="checkbox"是确定的情况下,才会让上述情况生效,type值不能是动态值,因为v-model被多次绑定同一个变量时,需要去检查type值,而如果这个时候type是动态的,比如用:type="type"进行动态绑定,就会导致模板编译报错。

v-model其实是v-bind和v-on的语法糖

这是vue官方文档中特别指出的,在阅读到这一句之前,我还对此很模糊,当阅读到:

<input v-model="something">其实是<input v-bind:value="something" v-on:input="something = $event.target.value">的语法糖
时,这种认识上的模糊就被消除了。

我们这篇文章没有讲到v-on,它其实就是一个事件绑定器。我们仔细阅读一下<input v-bind:value="something" v-on:input="something = $event.target.value">,发现它由两部分组成:v-bind:valuev-on:input,必须是value属性和input事件,否则也不会等价于v-model,而且input事件里面,正好是something等于当前输入值。

真因为这一原理,v-model瞬间就不再难理解了。

小结

总之,要区分v-bind和v-model,只需要记住三句话:

1. v-bind是数据绑定,没有双向绑定效果,但不一定在表单元素上使用,任何有效元素上都可以使用;
2. v-model是双向绑定,基本上只用在表单元素上;
3. 当v-bind和v-model同时用在一个元素上时,它们各自的作用没变,但v-model优先级更高,而且需区分这个元素是单个的还是一组出现的。

到此这篇关于详解vue中v-model和v-bind绑定数据的异同的文章就介绍到这了,更多相关vue中v-model和v-bind绑定数据内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript的类型简单说明
Sep 03 Javascript
为jQuery增加join方法的实现代码
Nov 28 Javascript
深入理解JS中的变量及作用域、undefined与null
Mar 04 Javascript
extjs_02_grid显示本地数据、显示跨域数据
Jun 23 Javascript
js点击文本框弹出可选择的checkbox复选框
Feb 03 Javascript
最丑的时钟效果!js canvas时钟制作方法
Aug 15 Javascript
概述一个页面从输入URL到页面加载完的过程
Dec 16 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
Feb 21 Javascript
使用 node.js 模仿 Apache 小部分功能
Jul 07 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
Sep 19 Javascript
解决LayUI数据表格复选框不居中显示的问题
Sep 25 Javascript
npm ci命令的基本使用方法
Sep 20 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
Aug 10 #Javascript
React实现阿里云OSS上传文件的示例
Aug 10 #Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
Aug 10 #Javascript
使用vue引入maptalks地图及聚合效果的实现
Aug 10 #Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
Aug 10 #Javascript
解决vue+webpack项目接口跨域出现的问题
Aug 10 #Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
Aug 10 #Javascript
You might like
IIS+fastcgi下PHP运行超时问题的解决办法详解
2013/06/20 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
5 cool javascript apps
2007/03/24 Javascript
Javascript 变量作用域 两个可能会被忽略的小特性
2010/03/23 Javascript
JavaScript类和继承 prototype属性
2010/09/03 Javascript
上传图片js判断图片尺寸和格式兼容IE
2014/09/01 Javascript
js添加select下默认的option的value和text的方法
2014/10/19 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
2017/02/17 Javascript
AngularJS的ng-click传参的方法
2017/06/19 Javascript
使用JavaScript根据图片获取条形码的方法
2017/07/04 Javascript
Vue-router 类似Vuex实现组件化开发的示例
2017/09/15 Javascript
vue使用 better-scroll的参数和方法详解
2018/01/25 Javascript
Nodejs调用Dll模块的方法
2018/09/17 NodeJs
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
剖析Python的Tornado框架中session支持的实现代码
2015/08/21 Python
python机器学习之神经网络(一)
2017/12/20 Python
python中int与str互转方法
2018/07/02 Python
使用python获取电脑的磁盘信息方法
2018/11/01 Python
pyqt5 实现在别的窗口弹出进度条
2019/06/18 Python
python用win32gui遍历窗口并设置窗口位置的方法
2019/07/26 Python
python3 常见解密加密算法实例分析【base64、MD5等】
2019/12/19 Python
Python坐标轴操作及设置代码实例
2020/06/04 Python
Kathmandu英国网站:新西兰户外运动品牌
2017/03/27 全球购物
Mybag美国/加拿大:英国奢华包包和名牌手袋网站
2020/02/16 全球购物
惠普新加坡官方商店:HP Singapore
2020/04/17 全球购物
教师个人剖析材料
2014/02/05 职场文书
教师网络培训感言
2014/03/09 职场文书
学校清明节活动总结
2014/07/04 职场文书
入党积极分子学习党的纲领思想汇报
2014/09/13 职场文书
党组织领导班子整改方案
2014/10/25 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
酒店办公室主任岗位职责
2015/04/01 职场文书
农村党员干部承诺书
2015/05/04 职场文书
2015暑假社会调查报告
2015/07/13 职场文书
python实现A*寻路算法
2021/06/13 Python