Skip to content

26 - 实现简易版v-model指令 #2049

Open
@kid1110

Description

@kid1110
// 你的答案
<script setup lang='ts'>

import { ref, watchEffect } from "vue"

/**
 * Implement a custom directive
 * Create a two-way binding on a form input element
 *
*/
const VOhModel = {
  mounted:(el,binding)=>{

    
    watchEffect(()=>{
    el.value = binding.value
    el.addEventListener('input',(e)=>{
    console.log(value)
      value.value = e.target.value
    })
    })
  }
}

const value = ref("Hello Vue.js")

</script>

<template>
  <input v-oh-model="value" type="text" />
  <p>{{ value }}</p>
</template>

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions