v-model

作者: jrg_tzc | 来源:发表于2018-11-19 15:48 被阅读0次

使用自定义事件的表单输入组件
自定义事件可以用来创建自定义的表单输入组件,使用 v-model 来进行数据双向绑定。看看这个:

<input v-model="something">

这不过是以下示例的语法糖:

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

所以在组件中使用时,它相当于下面的简写:

<custom-input v-bind:value="something" v-on:input="something = arguments[0]"></custom-input>

所以要让组件的 v-model 生效,它必须:

  • 接受一个 value 属性
  • 在有新的 value 时触发 input 事件
    我们来看一个非常简单的货币输入的自定义控件:
<currency-input v-model="price"></currency-input>

这里相当于

<currency-input v-bind:value="price" v-on:input="price = arguments[0]">

相关文章

网友评论

      本文标题:v-model

      本文链接:https://www.haomeiwen.com/subject/gvkafqtx.html