vue的模板采用DOM模板，也就是说它的【未经授权禁止转载】【本文首发于唐霜的博客】模板可以当做DOM节点运行，在浏览器下不著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net报错，绑定数据有三种方式，一种是插值，也【转载请注明来源】【未经授权禁止转载】就是{{name}}的形式，一种是v-b著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netind，还有一种是v-model。{{n原创内容，盗版必究。【版权所有，侵权必究】ame}}的形式比较好理解，就是以文本的本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。形式和实例data中对应的属性进行绑定。本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】比如：

【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。

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是绑定的，当d原创内容，盗版必究。【本文首发于唐霜的博客】ata.name发生变化时，视图也发生变【转载请注明来源】【本文受版权保护】化。

【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】【转载请注明来源】

但是v-bind和v-model这两种绑【作者：唐霜】【版权所有，侵权必究】定比较难区分，特别是在表单元素中，刚开始【转载请注明来源】转载请注明出处：www.tangshuang.net会混淆到底应该怎么使用。

【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。【本文受版权保护】

v-bind【版权所有】唐霜 www.tangshuang.net

【原创不易，请尊重版权】【本文受版权保护】【关注微信公众号：wwwtangshuangnet】

首先来看下v-bind，它的用法是后面加【转载请注明来源】【关注微信公众号：wwwtangshuangnet】冒号，跟上html元素的attribut【本文受版权保护】转载请注明出处：www.tangshuang.netions，例如：

转载请注明出处：www.tangshuang.net【版权所有，侵权必究】【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。

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

这里的v-bind:class会产生什么【本文受版权保护】未经授权，禁止复制转载。效果呢？实际上，首先你可以看下如果不加v-bind:，也就是：【原创内容，转载请注明出处】<p class="classed">，这只是一个普通的p元素，含有一个.cl【关注微信公众号：wwwtangshuangnet】【转载请注明来源】assed的类，没有任何数据参与进来。

【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net【本文受版权保护】【原创内容，转载请注明出处】

当加上v-bind:之后，就不一样了。它未经授权，禁止复制转载。原创内容，盗版必究。的值classed不是字符串，而是vue【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】实例对应的data.classed的这个【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。变量。也就是说data.classed是【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net什么值，它就会给class属性传递什么值著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。，当data.classed发生变化的时【未经授权禁止转载】转载请注明出处：www.tangshuang.net候，class属性也发生变化，这非常适合【作者：唐霜】【关注微信公众号：wwwtangshuangnet】用在通过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.sr【本文受版权保护】转载请注明出处：www.tangshuang.netc是空字符串，也就说不会有图片显示出来，【版权所有，侵权必究】【原创不易，请尊重版权】但是当从远端获取到图片地址之后，更新了d转载请注明出处：www.tangshuang.net【版权所有，侵权必究】ata.src，图片就会显示出来了。

【版权所有】唐霜 www.tangshuang.net【作者：唐霜】【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。

v-model【本文首发于唐霜的博客】

【本文受版权保护】著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net

v-model主要是用在表单元素中，它实【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。现了双向绑定原创内容，盗版必究。。双向绑定大家都非常熟了，简单的说就是默未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。认情况下，它跟上面两种情况的数据绑定是一【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】样的，实例的data.name发生变化的本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。时候，对应的试图中也会发生变化。但是v-本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】model绑定后，它还会反过来，在inp原创内容，盗版必究。【原创不易，请尊重版权】ut中手动输入新的内容，会反过来修改da【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.netta.name的值，如果在视图中其他地方【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】使用到了data.name，那么这个地方著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。就会因为data.name的变化而变化，本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。从而实现关联动态效果。下面来举个栗子：

【作者：唐霜】【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。

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

上面<input>中绑定了n【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】ame，那么当input的value发生原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。变化时，data.name就会跟着发生变【原创内容，转载请注明出处】未经授权，禁止复制转载。化，而data.name变化了{{nam原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.nete}}的地方也会跟着变化。

【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】

v-model是一种双向绑定，那么也就是转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。说，你绑定的元素得有机会改变值。所以实际【作者：唐霜】原创内容，盗版必究。上v-model基本上只会用在input【版权所有】唐霜 www.tangshuang.net【转载请注明来源】, textarea, select这些著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。表单元素上。

【版权所有，侵权必究】原创内容，盗版必究。【原创不易，请尊重版权】

v-bind和v-model混用本文作者：唐霜，转载请注明出处。

著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。

有一些情况我们需要v-bind和v-mo转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netdel一起使用。这个时候如果不留神，就会【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。搞乱状况，分不清哪里应该怎么控制。举个栗【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】子：

【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。

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

上面就是一个栗子。data.name和d【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】ata.body，到底谁跟着谁变呢？甚至【原创内容，转载请注明出处】未经授权，禁止复制转载。，它们会不会产生冲突呢？

未经授权，禁止复制转载。【本文受版权保护】原创内容，盗版必究。【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。

实际上它们的关系和上面的阐述是一样的，v【原创内容，转载请注明出处】【转载请注明来源】-bind产生的效果不含有双向绑定，所以转载请注明出处：www.tangshuang.net【作者：唐霜】:value的效果就是让input的va本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netlue属性值等于data.name的值，【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】而v-model的效果是使input和d【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。ata.body建立双向绑定，因此首先d著作权归作者所有，禁止商业用途转载。【作者：唐霜】ata.body的值会给input的va转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】lue属性，其次，当input中输入的值本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。发生变化的时候，data.body还会跟转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】着改变。

本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。【本文受版权保护】

现在的问题是，当这两个一起使用的时候，谁【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net都优先级高？谁会无效？实验证明，v-mo未经授权，禁止复制转载。未经授权，禁止复制转载。del将会被使用，v-bind这个时候无【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。效了，因为它正好绑定在value属性上，未经授权，禁止复制转载。【未经授权禁止转载】如果绑在其他属性上v-bind是不受影响本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net的。在这种情况下，v-bind失效，即使原创内容，盗版必究。原创内容，盗版必究。你修改data.name，input里面【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。不会有任何变化。

【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】

这也说明，v-model建立的双向绑定对本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】输入型元素input, textarea【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。, select等具有优先权，会强制实行【未经授权禁止转载】原创内容，盗版必究。双向绑定，如果你愿意的话。
转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】 这说明，在【关注微信公众号：wwwtangshuangnet】单独转载请注明出处：www.tangshuang.net的input中，同时使用v-bind和v【本文首发于唐霜的博客】【原创内容，转载请注明出处】-model是没有必要的，虽然不会造成冲本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net突。

本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】原创内容，盗版必究。【作者：唐霜】未经授权，禁止复制转载。

注意上面我说道“单独”，也就是说，在一组【原创内容，转载请注明出处】【作者：唐霜】输入中，它们又要另当别论。一组输入包括单【原创不易，请尊重版权】未经授权，禁止复制转载。选组、复选组、下拉选项、下拉选项组。

【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】【本文受版权保护】【版权所有】唐霜 www.tangshuang.net

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

在data中，它们是这样的：本文作者：唐霜，转载请注明出处。

【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】

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

一组复选框，或者一组下拉选项组，也就是s【版权所有，侵权必究】【本文首发于唐霜的博客】elect mutiple=”【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】;true”的情况，它们的结【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】果是一个数组，而非单个值，因此data.【版权所有，侵权必究】未经授权，禁止复制转载。selected是一个数组，当一个选项被原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。选中之后，这个选项的value值会被加入【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】到data.selected中（不是按o【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。ptions里面的顺序，而是操作过程中的【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】逻辑）。这个时候:value就是有效的，【未经授权禁止转载】【作者：唐霜】因为它表示把options数组中对应的选【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net项值传递给value，并不是双向绑定的意原创内容，盗版必究。转载请注明出处：www.tangshuang.net思，而只是传值过去（当然，当option【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】s中对应的值发生变化时，value值也会【未经授权禁止转载】转载请注明出处：www.tangshuang.net变化）。相当于说，v-bind负责val【原创内容，转载请注明出处】【版权所有，侵权必究】ue的值，v-model负责选中状态。当转载请注明出处：www.tangshuang.net【版权所有，侵权必究】然，v-model是双向绑定，界面上你去未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net勾选会影响data.selected的值著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。，你在程序中操作了data.select本文版权归作者所有，未经授权不得转载。【作者：唐霜】ed，也会反过来影响界面。v-model原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。影响的是勾选效果，而v-bind影响的是【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net值。（实际上，v-bind虽然只是影响值原创内容，盗版必究。【版权所有，侵权必究】，但是也会影响勾选效果，比如本来一个选框本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。是被勾选的，通过v-bind绑定值发生了【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。变化，那么新来的值就不会在data.se【作者：唐霜】【本文首发于唐霜的博客】lected中，这个选项就不会被勾选。如【版权所有】唐霜 www.tangshuang.net【作者：唐霜】果没有被勾选，改变后的值又在data.s【作者：唐霜】【未经授权禁止转载】elected中，那又会被勾选上。）

原创内容，盗版必究。【版权所有，侵权必究】【原创不易，请尊重版权】

注意，只有当type=”ch【转载请注明来源】著作权归作者所有，禁止商业用途转载。eckbox”是确定的情况下【原创内容，转载请注明出处】原创内容，盗版必究。，才会让上述情况生效，type值不能是动【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】态值，因为v-model被多次绑定同一个本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】变量时，需要去检查type值，而如果这个【本文受版权保护】【本文受版权保护】时候type是动态的，比如用:type=本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】”type”进行【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】动态绑定，就会导致模板编译报错。

转载请注明出处：www.tangshuang.net【作者：唐霜】著作权归作者所有，禁止商业用途转载。

v-model其实是v-bind和v-o本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】n的语法糖

【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】【版权所有，侵权必究】

这是vue官方文档中特别指出的，在阅读到【本文受版权保护】【本文受版权保护】这一句之前，我还对此很模糊，当阅读到：

本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。【本文受版权保护】

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

时，这种认识上的模糊就被消除了。【转载请注明来源】

未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net【转载请注明来源】【本文首发于唐霜的博客】

我们这篇文章没有讲到v-on，它其实就是本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】一个事件绑定器。我们仔细阅读一下<input v-bind:value="something" v-on:input="something = $event.target.value">，发现它由两部分组成：v-bind:va【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.netlue和v-on:input，必须是va著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】lue属性和input事件，否则也不会等【转载请注明来源】【版权所有】唐霜 www.tangshuang.net价于v-model，而且input事件里原创内容，盗版必究。【转载请注明来源】面，正好是something等于当前输入【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。值。

未经授权，禁止复制转载。原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】

真因为这一原理，v-model瞬间就不再原创内容，盗版必究。原创内容，盗版必究。难理解了。

转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】

小结著作权归作者所有，禁止商业用途转载。

原创内容，盗版必究。【原创内容，转载请注明出处】【本文首发于唐霜的博客】【未经授权禁止转载】

总之，要区分v-bind和v-model【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net，只需要记住三句话：

未经授权，禁止复制转载。【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net

1. v-bind是数据绑定，没有双向绑【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net定效果，但不一定在表单元素上使用，任何有【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。效元素上都可以使用；
【本文受版权保护】转载请注明出处：www.tangshuang.net 2. v-model是双向绑定，基本上原创内容，盗版必究。原创内容，盗版必究。只用在表单元素上；
【原创内容，转载请注明出处】【版权所有，侵权必究】 3. 当v-bind和v-model同【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】时用在一个元素上时，它们各自的作用没变，【未经授权禁止转载】【本文受版权保护】但v-model优先级更高，而且需区分这【本文受版权保护】【关注微信公众号：wwwtangshuangnet】个元素是单个的还是一组出现的。

【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】【未经授权禁止转载】【版权所有，侵权必究】【转载请注明来源】

2017-05-04 42473 vue