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>
这三种方法都可以获取到输入框的值，选择哪种方法取决于你的实际需求。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。