vue3.0中怎么实时获取input标签中的值?

yoga
  • 5
浙江新手上路,请多包涵


有一个input标签,现在需求就是想实时获取当前input标签中的value,当我往后面输入或者删除字母的时候,这个是一个type=‘text’的,我可以输入和删除 ,当我失焦的时候 我想获取当前value,有啥好办法,我想法是获取dom在获取上面的value,vue2.0那种$refs,3.0有啥好办法获取当前实例上的属性

这个获取当前实时value值是可以,但是现在有个需求,里面这个value是下面这个选项卡传进来的,当我选中后,在删除里面的value,如果value没有全部删除,失去焦点就会记忆之前选那个

最终:

回复
阅读 389
1 个回答
YoLinDeng
  • 543
广东
<input ref='inputRef' v-model="inputVal">

<script setup>
import { ref, onMounted } from 'vue'
const inputRef = ref()
const inputVal = ref() // input的value双向绑定的,会跟着input输入来改变。
onMounted(() => {
    console.log(inputRef.value) // 这样就可以获取到input实例。
})

</script>

补充:

<input v-model="inputVal" @blur="blurInput" @input="changeValue">


import { watch, ref } from 'vue'
export default {
  props: {
    value: {
        type: 'String'
    }
  },
emits: ['setValue'],
 setup(props, context) {
   let inputVal = ref()
    watch(() => props.value, (newVal) => {
        inputVal.value = newVal
    })
    const changeValue = () => {
        context.emit('setValue', inputVal.value)
    }
    const blurInput = () => {
        context.emit('setValue', inputVal.value)
    }
 }
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏