vue input获取值的3种方法
以下是三种在Vue中获取输入框(input)值的方法:
方法一:使用 v-model 指令
htmlhtml获取input输入的数据
<template> 
  <div> 
    <input v-model="inputValue" type="text"> 
    <p>输入的值是:{{ inputValue }}</p> 
  </div> 
</template> 
 
<script> 
export default { 
  data() { 
    return { 
      inputValue: '' 
    } 
  } 
</script>
方法二:使用 input 事件
html
<template> 
  <div> 
    <input @input="handleInput" type="text"> 
    <p>输入的值是:{{ inputValue }}</p> 
  </div> 
</template> 
 
<script> 
export default { 
  data() { 
    return { 
      inputValue: '' 
    } 
  }, 
  methods: { 
    handleInput(event) { 
      this.inputValue = event.target.value; 
    } 
  } 
</script>
方法三:使用 watch
html
<template> 
  <div> 
    <input type="text"> 
    <p>输入的值是:{{ inputValue }}</p> 
  </div> 
</template> 
 
<script> 
export default { 
  data() { 
    return { 
      inputValue: '' 
    } 
  }, 
  watch: { 
    'inputValue': function(newVal, oldVal) { 
      console.log('新值: ' + newVal + ', 旧值: ' + oldVal); 
    } 
  } 
</script>
这三种方法都可以获取到输入框的值,选择哪种方法取决于你的实际需求。