vue中v-model的实现

v-model

 vue中的v-model 双向绑定事件专门用于 input组件,这只不是一种语法糖形式:input组件本身就有一个v-on绑定的input事件,每当输入框中的内容发生改变后。就会触发这个事件将当前框中的值赋值给value绑定的值

<input v-model='value'>
等价于
<input v-bind:value="value" v-on:input="value = $event.target.value">

 自定义v-model

         默认情况下v-model 只接受value属性和响应input事件,但是我们可以通过model属性来改变这种情况。

model 接受有两个属性:

  props:代替原来的value

  event:代替原来的input事件

    自定义组件

<template>
  <div>
    <input type="checkbox" :checked='checked' 
          @change='(e)=>$emit("change",e.target.checked)'>选项
  </div>
</template>
<script>
    export default {
        model: {
           prop: 'checked',
           event: 'change'
        }
        props: ['checked']
}
</script>

   使用

<customCheckbox v-model="checked" />

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值