Vue.js——v-model 和 v-bind 的区别 [英] Vue.js—Difference between v-model and v-bind

问题描述

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

I'm learning Vue with an online course and the instructor gave me an exercise to make an input text with a default value. I completed it using v-model but, the instructor chose v-bind:value and I don't understand why.

谁能给我简单解释一下这两者之间的区别以及什么时候最好使用它们?

Can someone give me a simple explanation about the difference between these two and when it's better use each one?

推荐答案

来自 这里 -记住:

From here - Remember:

<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 值.

So v-model is a two-way binding for form inputs. It combines v-bind, which brings a js value into the markup, and v-on:input to update the js value.

尽可能使用 v-model.必须时使用 v-bind/v-on :-) 我希望你的回答被接受.

Use v-model when you can. Use v-bind/v-on when you must :-) I hope your answer was accepted.

v-model 适用于所有基本的 HTML 输入类型(文本、文本区域、数字、单选、复选框、选择).如果您的模型将日期存储为 ISO 字符串 (yyyy-mm-dd)，您可以将 v-model 与 input type=date 一起使用.如果你想在你的模型中使用日期对象(一个好主意，一旦你要操作或格式化它们)，这样做.

v-model works with all the basic HTML input types (text, textarea, number, radio, checkbox, select). You can use v-model with input type=date if your model stores dates as ISO strings (yyyy-mm-dd). If you want to use date objects in your model (a good idea as soon as you're going to manipulate or format them), do this.

v-model 有一些额外的智能，需要注意一下.如果您使用的是 IME(许多移动键盘，或中文/日文/韩文)，则 v-model 不会更新，直到单词完成(输入空格或用户离开该字段).v-input 会更频繁地触发.

v-model has some extra smarts that it's good to be aware of. If you're using an IME ( lots of mobile keyboards, or Chinese/Japanese/Korean ), v-model will not update until a word is complete (a space is entered or the user leaves the field). v-input will fire much more frequently.

v-model 也有修饰符 .lazy、.trim、.number，在 文档.

v-model also has modifiers .lazy, .trim, .number, covered in the doc.

这篇关于Vue.js——v-model 和 v-bind 的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！