Vue中 v-model 原理

最新推荐文章于 2024-08-16 15:49:18 发布

IT_全世界的屋顶

最新推荐文章于 2024-08-16 15:49:18 发布

阅读量363

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_50313248/article/details/117168757

版权

本文探讨Vue中v-model的工作原理，揭示其作为语法糖的本质。v-model根据不同的输入元素（如text, textarea, checkbox, radio, select）绑定不同的属性和事件。在普通标签上，它关联value和input事件；在组件上，v-model则体现了更多的灵活性。" 117353378,8753399,GDCM gdcm::Element 测试实践,"['医学影像', 'GDCM库', '编程', '测试']

摘要由CSDN通过智能技术生成

Vue中 v-model 原理

v-model 只是语法糖而已

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：
text 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

在普通标签上

  <input v-model="sth" />  //这一行等于下一行
  <input v-bind:value="sth" v-on:input="sth = $event.target.value" />

在组件上

<currency-input v-model="price"></currentcy-input>
<!--上行代码是下行的语法糖
 <currency-input :value="price" @input="price = arguments[0]"></currency-input>
-->

<!-- 子组件定义 -->
Vue.component('currency-input', {
 template: `
  <span>
   <input
    ref="input"
    :value="value"
    @input="$emit('input', $event.target.value)"
   >
  </span>
 `,
 props: ['value'],
})