Vue.js-v模型和v-bind之间的差异

v-model
是两种方式的数据绑定，它用于在更改输入值时绑定html输入元素，然后绑定的数据将被更改。

v模型仅用于HTML输入元素

ex: <input type="text" v-model="name" > 

v-bind
是数据绑定的一种方式，意味着您只能将数据绑定到输入元素，而不能更改有界数据更改输入元素。 v-bind用于绑定html属性，
例如：
<input type="text" v-bind:class="abc" v-bind:value="">

<a v-bind:href="home/abc" > click me </a>

在某些情况下，您不想使用v-model。如果您有两个输入，并且每个输入都相互依赖，则可能会有循环引用问题。常见的用例是您要构建会计计算器。

在这些情况下，使用监视程序或计算属性不是一个好主意。

取而代之的v-model是按照上面的答案进行拆分

<input
   :value="something"
   @input="something = $event.target.value"
>

在实践中，如果您以这种方式将逻辑去耦，则可能会调用一个方法。

这是真实情况下的样子：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input :value="extendedCost" @input="_onInputExtendedCost" />
  <p> {{ extendedCost }}
</div>

<script>
  var app = new Vue({
    el: "#app",
    data: function(){
      return {
        extendedCost: 0,
      }
    },
    methods: {
      _onInputExtendedCost: function($event) {
        this.extendedCost = parseInt($event.target.value);
        // Go update other inputs here
    }
  }
  });
</script>

简单来说 v-model，绑定是两种方式：如果更改输入值，则绑定的数据将被更改，反之亦然。

但是v-bind:value被称为一种方式绑定，这意味着：您可以通过更改绑定数据来更改输入值，但不能通过element通过更改输入值来更改绑定数据。

看看这个简单的例子：https : //jsfiddle.net/gs0kphvc/