v-model和v-bind

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

var app = new Vue（{el：'#app'，template：'<div @ click =“toggleName”> {{name}} </ div>'，data：{name：'tom'，}，method： {toggleName（）{this.name = this.name ==='tom'？'sony'：'tom'}，}，}）

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

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

V-绑定

首先来看下V-绑定，它的用法是后面加冒号，跟上HTML元素的归属，例如：

<p v-bind：class =“classed”>

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

当加上V-绑定：之后，就不一样了它的值归类不是字符串，而是VUE实例对应的data.classed的这个变量也就是说data.classed是什么值，它就会给类。属性传递什么值，当data.classed发生变化的时候，阶级属性也发生变化，这非常适合用在通过CSS来实现动画效果的场合，除了类，其他大部分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模型

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

var app = Vue（{el：'#app'，template：'<label> <input v-model =“name”> {{name}} </ label>'，data：{name：''，}， }）

上面<输入>中绑定了名称，那么当输入的值发生变化时，data.name就会跟着发生变化，而data.name变化了{{名称}}的地方也会跟着变化。

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

V-绑定和V型混用

有一些情况我们需要V-绑定和V-模型一起使用这个时候如果不留神，就会搞乱状况，分不清哪里应该怎么控制举个栗子。：

<input：value =“name”v-model =“body”>

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

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

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

这也说明，v-model建立的双向绑定对输入型元素输入，textarea，选择等具有优先权，会强制实行双向绑定，如果你愿意的话。

这说明，在单独的输入中，同时使用v型绑定和V-模型是没有必要的，虽然不会造成冲突。

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

<label for =“value in options”> <input type =“checkbox”：value =“value”v-model =“selected”> </ label>

在数据中，它们是这样的：

数据：{选项：[1，2，3，4，5]，选中：[]，}

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

注意，只有当类型= “复选框” 是确定的情况下，才会让上述情况生效，类型值不能是动态值，因为V型模型被多次绑定同一个变量时，需要去检查输入值，而如果这个时候类型是动态的，比如用：类型= “类型” 进行动态绑定，就会导致模板编译报错。

V模型其实是V-绑定和V系列的语法糖

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

<input v-model =“something”>其实是<input v-bind：value =“something”v-on：input =“something = $ event.target.value”>的语法糖

时，这种认识上的模糊就被消除了。

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

真因为这一原理，V模型瞬间就不再难理解了。

小结

总之，要区分V-绑定和V型，只需要记住三句话：

1. v-bind是数据绑定，没有双向绑定效果，但不一定在表单元素上使用，任何有效元素上都可以使用;

2. v-model是双向绑定，基本上只用在表单元素上;

3.当v-bind和v-model同时用在一个元素上时，它们各自的作用没变，但v-model优先级更高，而且需要区分这个元素是单个的还是一组出现的。

v-model和v-bind相关推荐

188968-51-6，cilengitide，西仑吉肽，选择性的αvβ3 和αvβ5受体整合素抑制剂
中文名:西仑吉肽环(L-精氨酰甘氨酰-L-天冬氨酰-D-苯丙氨酰-N-甲基-L-缬氨酰) 倍他司汀二盐酸盐英文名: cyclo(L-arginylglycyl-L-a-aspartyl-D-phe ...
vscode 终端进入node_安装了Node.js 从VScode 使用node -v 和 npm -v等命令却无效
前言最近写TypeScript需要安装.配置Node.js环境,楼主是使用的安装包所以环境变量都是自动就配好了(如果是下载的zip压缩包解压后要自己配置到系统环境变量中).打开系统终端敲入命令 no ...
POJ2762 Going from u to v or from v to u? 强连通+缩点
题目链接: poj2762 题意: 给出一幅单向图.问这张图是否满足随意两点ab 都能从a到达b 或从b到达a 题解思路: 推断一幅图是否满足弱连通首先想到的是将图中的强连通分量(能互 ...
事务的四大特性、事务处理开始与结束、v$transactio、 v$LOCK
数据库事务的四大特性:ACID 事务的4大特性(ACID): 原子性(Atomicity):事务是数据库的逻辑工作单位,它对数据库的修改要么全部执行,要么全部不执行.一致性(Consistemcy): ...
poj Going from u to v or from v to u? 强联通缩点+拓扑排序（或搜索）
方法一 #include <stdio.h> #include <string.h> #include <iostream> #include <algori ...
【POJ - 2762】Going from u to v or from v to u?（Tarjan缩点，树形dp 或拓扑排序，欧拉图相关）
题干: In order to make their sons brave, Jiajia and Wind take them to a big cave. The cave has n rooms ...
v$sql、v$sqlarea 、v$sqltext
分享: ------------------------------- v$sql.v$sqlarea .v$sqltext 这三个视图都可以用于查询共享池中已经解析过的SQL语句及其相关信息. V$ ...
安装了Node.js 从VScode 使用node -v 和 npm -v等命令却无效
前言最近写TypeScript需要安装.配置Node.js环境,楼主是使用的安装包所以环境变量都是自动就配好了(如果是下载的zip压缩包解压后要自己配置到系统环境变量中).打开系统终端敲入命令 no ...
POJ 2762Going from u to v or from v to u?(强联通 + 缩点 + 拓扑排序)
[题意]: 有N个房间,M条有向边,问能否毫无顾虑的随机选两个点x, y,使从①x到达y,或者,②从y到达x,一定至少有一条成立.注意是或者,不是且. [思路]: 先考虑,x->y或者y-> ...
POJ 2762 Going from u to v or from v to u? （判断单连通）
http://poj.org/problem?id=2762 题意: 给出有向图,判断任意两个点u和v,是否可以从u到v或者从v到u. 思路: 判断图是否是单连通的. 首先来一遍强连通缩点,重新建立新 ...

v-model和v-bind

V-绑定

V模型

V-绑定和V型混用

V模型其实是V-绑定和V系列的语法糖

小结

v-model和v-bind相关推荐

最新文章

热门文章