vuejs-challenges icon indicating copy to clipboard operation
vuejs-challenges copied to clipboard

26 - 实现简易版`v-model`指令

Open PoliWen opened this issue 2 years ago • 0 comments

<script setup lang='ts'>

import { ref } from "vue"

/**
 * Implement a custom directive
 * Create a two-way binding on a form input element
 *
*/
const VOhModel = {
    mounted(el, binding){
      el.value = binding.value
      el.addEventListener('input', (ev) => {
        value.value = ev.target.value
      })
  }
}
const value = ref("Hello Vue.js")

</script>

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

PoliWen avatar Sep 12 '22 15:09 PoliWen