基于组件的库或框架，如vue公司给我们的精彩能够创建可重用的组件在他们各自的应用程序中传播，确保它们是一致的，并且（希望）简化如何使用它们。
特别是，表单输入往往有很多复杂的，你会希望在组件隐藏起来，比如定制设计，标签，验证，帮助信息，并确保每个片都以正确的顺序，使它们呈现正确。
编写可重用模块中es6你兴奋地利用新的javascript语言特性，但不知道哪里开始，或如何？阅读更多→
上，虽然之上，vue公司有一个叫做内置指令v-model是模拟2路结合通过结合一个值，并捕获输入事件。如果你要建立一个自定义输入组件，那么你肯定会想要支持的v-model指令。
可悲的是，当我环顾四周的单选按钮或复选框在vue公司的自定义输入的例子，他们要么没有考虑v-model考虑所有，或他们没有正确地执行它。有一些像样的自定义文本输入的文档，但由于它没有解释自定义电台或复选框，我们将讨论这一点。
本教程旨在帮助你…
了解如何v-model在本地投入工作，主要侧重于收音机和复选框了解如何v-model在默认情况下自定义组件的工作原理了解如何创建自定义的复选框和收音机是模拟如何v-model对他们本身的工作原理快速记在我们开始之前：es2015 +代码将在整个代码示例中使用。我也有利于单个文件组件在使用语法vue.component或new vue。
如何v-model正常工作状态？官方的vue文件实际上是对这个话题相当不错的，但也有一些小的盲点。在任何情况下，我们将努力几乎完全是包括在这里。
从本质上说，v-model仅仅是一个速记指令，为我们提供了2路数据绑定，并且它的代码是简写形式，取决于它正在使用什么类型的输入。
文本框<input v-model=message placeholder=edit me>
<p>message: {{ message }}</p>
<!-- or -->
<p>message:</p>
<p style=white-space: pre-line>{{ message }}</p>
<textarea v-model=message placeholder=add multiple lines></textarea>
当使用文本input（包括类型，例如email，number等）或textarea，v-model=varname等价于:value=varname @input=e => varname = e.target.value。这意味着，输入的值被设置为varname每次更新到输入后varname更新为输入的值。一个正常的select元素会像这样过，虽然multiple选择会有所不同。
单选按钮那么，怎么样的单选按钮？
<input type=radio value=one v-model=picked>
<input type=radio value=two v-model=picked>
<span>picked: {{ picked }}</span>
这相当于：
<input type=radio value=one :checked=picked == 'one' @change=e => picked = e.target.value>
<input type=radio value=two :checked=picked == 'two' @change=e => picked = e.target.value>
<span>picked: {{ picked }}</span>
注意如何v-model甚至没有接触value了。它仍然在做了同样的事情，change事件处理程序（虽然它改为change代替input），但现在它决定是否checked应该是真实的还是取决于是否错误picked是相同的单选按钮的值。
复选框复选框是有点困难谈谈，因为他们有这取决于是否有只有一个复选框与给定的两种不同的行为v-model或多个。
如果您使用的是单个复选框，v-model将像对待一个布尔值，并忽略value。
<input type=checkbox value=foo v-model=ischecked>
是相同的…
<input type=checkbox value=foo :checked=!!ischecked @change=e => ischecked = e.target.checked>
如果你希望它是比其他的东西true和false，你可以使用true-value和false-value属性，它控制哪些值你的模型将被设定，当复选框被选中或不。
<input type=checkbox value=foo v-model=ischecked true-value=1 false-value=0>
是相同的…
<input type=checkbox value=foo :checked=ischecked == '1' @change=e => ischecked = e.target.checked ? '1' : '0'>
这几乎是它的单选框例子。如果你有一个共享模型多个复选框，则这些复选框将填充数组与被检查所有复选框的值，但要确保你通过在模型中已经是一个数组，否则你会得到一些奇怪的行为。此外，true-value和false-value属性不再有任何影响。
<template>
<div>
<input type=checkbox value=foo v-model=checkedvals>
<input type=checkbox value=bar v-model=checkedvals>
<input type=checkbox value=baz v-model=checkedvals>
</div>
</template>
<script>
export default {
data: () => ({
checkedvals: ['bar']
})
}
</script>
等效是有点困难，以保持在模板中，所以我将一些逻辑移动到组件上的方法：
<template>
<div>
<input type=checkbox value=foo v-model=checkedvals>
<input type=checkbox value=bar v-model=checkedvals>
<input type=checkbox value=baz v-model=checkedvals>
</div>
</template>
<script>
export default {
data() {
return { checkedvals: ['bar'] }
},
methods: {
shouldbechecked(val) {
return this.checkedvals.includes(val)
},
updatevals(e) {
let ischecked = e.target.checked
let val = e.target.value
if (ischecked) {
this.checkedvals.push(val)
} else {
this.checkvals.splice(this.checkedvals.indexof(val), 1)
}
}
}
}
</script>
这是一个很多比我们以前看到更复杂，但如果你打破它，它也不是太糟糕。shouldbechecked是true当被包括在阵列中该复选框的值，并且false，如果它不是。updatevals增加了复选框的值到数组时，它被选中并删除它时，它被选中。
如何v-model上工作的组件？由于vue公司不知道你的组件是如何工作的，或者如果它试图充当某种类型的输入的替代品，它把与问候到相同的所有组件v-model。它的实际工作，因为它确实为文本输入，但在事件处理程序，它并不期望一个事件对象传递给它，而它预计值传递直奔它完全相同的方式。所以…
<my-custom-component v-model=myproperty />
…是同样的事情…
<my-custom-component :value=myproperty @input=val => myproperty