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

JavaScript

小卤蛋AGO

2020-03-09

我正在通过在线课程学习Vue，导师给了我一个练习，使输入文本具有默认值。我使用v-model完成了此操作，但是讲师选择了v-bind：value，但我不明白为什么。

有人可以给我简单的解释一下两者之间的区别，以及何时最好使用它们之间的区别？

第328篇《Vue.js-v模型和v-bind之间的差异》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答

宝儿逆天 2020.03.09

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>

猴子NearJinJin 2020.03.09

在某些情况下，您不想使用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>