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

2020/10/12 12:41 · javascript ·  · 0评论

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

有人可以简单介绍一下这两者之间的区别,以及何时最好使用它们?

这里开始-请记住:

<input v-model="something">

本质上与以下内容相同:

<input
   v-bind:value="something"
   v-on:input="something = $event.target.value"
>

或(简写语法):

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

所以v-model是一个双向的表单输入绑定它结合v-bind,这带来了一个JS值到标记,并v-on:input更新JS值

v-model可以的时候使用必要时使用v-bind/ v-on,-)我希望您的回答被接受。

v-model 适用于所有基本的HTML输入类型(文本,文本区域,数字,单选,复选框,选择)。如果您的模型将日期存储为ISO字符串(yyyy-mm-dd)v-modelinput type=date可以使用with 如果您想在模型中使用日期对象(一旦您要对它们进行操作或设置格式,是一个好主意),请执行此操作

v-model有一些额外的聪明之处,值得您注意。如果您使用的是IME(许多移动键盘,或者中文/日文/韩文),则v-model不会更新,直到单词完整(输入空格或用户离开字段)为止。v-input会更频繁地触发。

v-model也有修饰语.lazy.trim.number,覆盖的文档

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

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

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

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称为绑定的一种方式,这意味着:您可以通过更改绑定数据来更改输入值,但是不能通过通过元素更改输入值来更改绑定数据。

v-模型旨在与表单元素一起使用。它允许您将表单元素(例如,文本输入)与Vue实例中的数据对象相关联。

示例:https//jsfiddle.net/jamesbrndwgn/j2yb9zt1/1/

v-bind旨在与组件一起使用以创建自定义道具。这使您可以将数据传递到组件。由于道具是反应性的,如果传递给组件的数据发生更改,则组件将反映此更改

Example: https://jsfiddle.net/jamesbrndwgn/ws5kad1c/3/

希望这对您有基本的了解。

本文地址:http://javascript.askforanswer.com/vue-js-vmoxinghev-bindzhijiandechayi.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!