Question

我是Vue.js的新手，我正在学习Udemy的在线课程。导师给了我一些练习。其中一个练习是使用默认值创建输入文本。我使用v-model做得非常好。但是，教师使用了v-bind：value，我不明白为什么。

有人可以给我一个简单的解释，说明这两者之间的区别，以及何时更好地使用每一个？

Answer 1

来自 here - 记住：

<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 works with all the basic HTML input types（text，textarea，number，radio，checkbox，select）。如果您的模型将日期存储为ISO字符串（yyyy-mm-dd），则可以将v-model与input type=date一起使用。如果你想在你的模型中使用日期对象（一旦你想要操纵或格式化它们就是一个好主意），do this。

v-model有一些额外的智慧，值得注意的是。如果您正在使用IME（许多移动键盘或中文/日文/韩文），则在单词完成（输入空格或用户离开该字段）之前，v-model不会更新。它还包含.lazy所涵盖的修饰符.trim，.number，ui <- fluidPage( titlePanel(""), fluidRow( column(3, wellPanel( uiOutput('slider1'), uiOutput('text1') )) )) server <- function(input, output) { output$slider1<-renderUI({ text1.value<-input$slider1 default.slider1<-if(is.null(text1.value)) 15 else text1.value textInput("text1", label="slider", value = default.slider1) }) output$text1<-renderUI({ slider1.value<-input$text1 default.text1<-if(is.null(slider1.value)) 15 else slider1.value sliderInput("slider1", label = h5("text"), min = -10, max = 10, value = default.text1,step = 1) })}。

Answer 2

简单来说 v-model用于双向绑定，表示：如果更改输入值，则绑定的数据将被更改，反之亦然。

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

查看以下简单示例：https://jsfiddle.net/gs0kphvc/

Answer 3

v模型用于两种方式的绑定方式：如果更改输入值，则绑定的数据将被更改，反之亦然。但是v-bind：value称为一种方式绑定，这意味着：您可以通过更改绑定数据来更改输入值，但是不能通过通过元素更改输入值来更改绑定数据。

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

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

v-bind旨在与组件一起使用以创建自定义道具。这使您可以将数据传递到组件。由于道具是被动的，因此如果传递给组件的数据发生变化，则组件将反映出这种变化

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

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

Answer 4

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

v模型仅用于HTML输入元素

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

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

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

Answer 5

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

Answer 6

我阅读了 Vue 3 的文档并按照步骤正确声明了 props 并发出了 - 然后警告消失了。

props:{
        modelValue: String
    },

emits:['update:modelValue'],

Vue.js- v-model和v-bind之间的区别

6 个答案: