vue @input

作者：叶随雨落发布日期:2025-12-18 浏览:19

<template>
  <div>
    <input v-model="message" @input="onInput" />
    <p>你输入的内容是: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  methods: {
    onInput(event) {
      console.log('输入事件触发:', event.target.value);
      // 可以在这里处理输入逻辑
    }
  }
};
</script>

解释说明：

v-model：用于双向绑定输入框的值到 message 数据属性。
@input：监听输入框的输入事件，每当用户输入内容时会触发 onInput 方法。
onInput 方法：接收事件对象 event，可以通过 event.target.value 获取当前输入框的值，并可以在控制台打印或进行其他处理。

如果你需要更复杂的功能，可以根据需求在 onInput 方法中添加更多逻辑。

上一篇：vue router 跳转

下一篇：vue 调用子组件方法