详解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 相关文章推荐
document.getElementById为空或不是对象的解决方法
Jan 24 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
Dec 30 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
Apr 10 Javascript
jQuery中triggerHandler()方法用法实例
Jan 19 Javascript
jquery插件star-rating.js实现星级评分特效
Apr 15 Javascript
jquery实现简单手风琴菜单效果实例
Jun 13 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
Aug 25 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
解决vue项目打包后提示图片文件路径错误的问题
Jul 04 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
Nov 17 Javascript
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
js实现碰撞检测
Jan 29 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
Laravel相关的一些故障解决
2020/08/19 PHP
原创javascript小游戏实现代码
2010/08/19 Javascript
jquery 触发a链接点击事件解决方案
2013/05/02 Javascript
jquery统计用户选中的复选框的个数
2014/06/06 Javascript
jQuery DOM插入节点操作指南
2015/03/03 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
nodejs密码加密中生成随机数的实例代码
2017/07/17 NodeJs
简单快速的实现js计算器功能
2017/08/17 Javascript
利用javascript如何随机生成一定位数的密码
2017/09/22 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
2017/10/27 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
2018/01/25 jQuery
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
微信小程序中进行地图导航功能的实现方法
2018/06/29 Javascript
vue左侧菜单,树形图递归实现代码
2018/08/24 Javascript
详解微信小程序中组件通讯
2018/10/30 Javascript
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
2019/11/26 Javascript
vue+iview实现分页及查询功能
2020/11/17 Vue.js
[04:42]5分钟带你了解什么是DOTA2(第一期)
2017/02/07 DOTA
Python爬取APP下载链接的实现方法
2016/09/30 Python
python 遍历字符串(含汉字)实例详解
2017/04/04 Python
[原创]教女朋友学Python3(二)简单的输入输出及内置函数查看
2017/11/30 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
python实现杨氏矩阵查找
2019/03/02 Python
set在python里的含义和用法
2019/06/24 Python
pyqt5中动画的使用详解
2020/04/01 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
python使用建议技巧分享(三)
2020/08/18 Python
澳洲的服装老品牌:SABA
2018/02/06 全球购物
财务经理岗位职责
2013/11/09 职场文书
先进个人材料怎么写
2014/12/30 职场文书
家属慰问信
2015/02/14 职场文书
民事诉讼代理词
2015/05/25 职场文书
MySql中的json_extract函数处理json字段详情
2022/06/05 MySQL
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers