vue.js里如何拿到页面输入的值

在Vue.js中，拿到页面输入的值可以通过v-model指令、使用refs、表单事件监听等方式来实现。下面将详细介绍其中的一种方式，即使用v-model指令。v-model是Vue.js中用于双向绑定数据的一个指令，它可以让视图中的数据和Vue实例中的数据保持同步。

一、使用v-model指令

1、什么是v-model指令

v-model是Vue.js提供的一个用于实现表单控件与数据绑定的指令。它可以让输入框、选择框、单选按钮、复选框等表单控件与Vue实例中的数据保持双向绑定。具体来说，当用户在页面中输入数据时，v-model会自动将数据更新到Vue实例中，而当Vue实例中的数据发生改变时，v-model也会自动更新视图中的表单控件。

2、如何使用v-model指令

在Vue.js中使用v-model指令非常简单，只需要在表单控件上添加v-model指令，并绑定一个Vue实例中的属性即可。例如：

<template>
  <div>
    <input type="text" v-model="message" />
    <p>输入的内容是：{{ message }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

在上面的例子中，当用户在输入框中输入内容时，v-model会自动将输入的内容更新到Vue实例中的message属性中，同时在页面中显示输入的内容。

3、v-model的高级用法

除了基本的用法，v-model还有一些高级用法，例如可以绑定复杂的数据类型、使用修饰符等。

3.1、绑定复杂的数据类型

v-model不仅可以绑定字符串类型的数据，还可以绑定对象、数组等复杂的数据类型。例如：

<template>
  <div>
    <input type="text" v-model="user.name" />
    <input type="number" v-model="user.age" />
    <p>用户名：{{ user.name }}</p>
    <p>年龄：{{ user.age }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      user: {
        name: '',
        age: null
      }
    };
  }
};
</script>

在上面的例子中，v-model将输入框中的内容分别绑定到user对象的name和age属性中。

3.2、使用修饰符

v-model提供了一些修饰符，可以用于处理一些特殊情况。例如，.lazy修饰符可以延迟数据更新，直到用户离开输入框时才更新数据；.number修饰符可以将输入的内容转换为数字类型；.trim修饰符可以自动去除输入的空格。例如：

<template>
  <div>
    <input type="text" v-model.lazy="message" />
    <input type="text" v-model.number="age" />
    <input type="text" v-model.trim="name" />
    <p>消息：{{ message }}</p>
    <p>年龄：{{ age }}</p>
    <p>姓名：{{ name }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: '',
      age: null,
      name: ''
    };
  }
};
</script>

在上面的例子中，.lazy修饰符使得数据在用户离开输入框时才更新，.number修饰符将输入的内容转换为数字类型，.trim修饰符自动去除输入的空格。

二、使用refs获取表单控件的值

1、什么是refs

refs是Vue.js提供的一种获取DOM元素或组件实例的方式。通过在模板中使用ref属性，可以在Vue实例中通过this.$refs访问对应的DOM元素或组件实例。

2、如何使用refs获取表单控件的值

在Vue.js中，可以通过refs获取表单控件的值，具体步骤如下：

2.1、在模板中添加ref属性

在需要获取值的表单控件上添加ref属性，例如：

<template>
  <div>
    <input type="text" ref="inputRef" />
    <button @click="getInputValue">获取输入框的值</button>
  </div>
</template>

2.2、在Vue实例中通过this.$refs访问DOM元素

在methods中定义一个方法，通过this.$refs访问对应的DOM元素，并获取其值，例如：

<script>
export default {
  methods: {
    getInputValue() {
      const inputValue = this.$refs.inputRef.value;
      console.log(inputValue);
    }
  }
};
</script>

当用户点击按钮时，getInputValue方法会被调用，并通过this.$refs.inputRef.value获取输入框的值。

三、使用表单事件监听获取输入值

1、什么是表单事件监听

表单事件监听是指通过监听表单控件的输入事件（如input事件、change事件）来获取用户输入的内容。在Vue.js中，可以通过v-on指令（简写为@）来监听事件，并在事件处理函数中获取输入的值。

2、如何使用表单事件监听获取输入值

在Vue.js中，可以通过表单事件监听获取输入值，具体步骤如下：

2.1、在模板中添加事件监听

在需要监听的表单控件上添加事件监听，例如：

<template>
  <div>
    <input type="text" @input="handleInput" />
    <p>输入的内容是：{{ inputValue }}</p>
  </div>
</template>

2.2、在Vue实例中定义事件处理函数

在methods中定义一个事件处理函数，通过事件对象获取输入的值，并更新到Vue实例中，例如：

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleInput(event) {
      this.inputValue = event.target.value;
    }
  }
};
</script>

当用户在输入框中输入内容时，handleInput方法会被调用，并通过event.target.value获取输入框的值，更新到inputValue属性中。

四、使用v-model与事件监听结合

在实际开发中，可以将v-model与事件监听结合使用，以实现更复杂的需求。例如，可以在v-model的基础上，添加事件监听来处理一些额外的逻辑。

1、在模板中结合使用v-model与事件监听

在表单控件上同时使用v-model和事件监听，例如：

<template>
  <div>
    <input type="text" v-model="message" @input="handleInput" />
    <p>输入的内容是：{{ message }}</p>
  </div>
</template>

2、在事件处理函数中处理额外的逻辑

在methods中定义一个事件处理函数，处理一些额外的逻辑，例如：

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  methods: {
    handleInput(event) {
      // 处理额外的逻辑，例如数据验证
      if (event.target.value.length > 10) {
        alert('输入的内容不能超过10个字符');
        this.message = event.target.value.slice(0, 10);
      }
    }
  }
};
</script>

在上面的例子中，当用户输入的内容超过10个字符时，会弹出提示，并截取前10个字符。

五、使用自定义组件与v-model

在Vue.js中，可以通过自定义组件与v-model结合使用，实现更灵活的数据绑定。

1、定义自定义组件

定义一个自定义组件，例如MyInput.vue：

<template>
  <input type="text" :value="value" @input="$emit('input', $event.target.value)" />
</template>
<script>
export default {
  props: ['value']
};
</script>

在自定义组件中，通过props接收父组件传递的值，并通过$emit触发input事件，将输入的值传递给父组件。

2、在父组件中使用自定义组件与v-model绑定

在父组件中使用自定义组件，并通过v-model与自定义组件绑定，例如：

<template>
  <div>
    <MyInput v-model="message" />
    <p>输入的内容是：{{ message }}</p>
  </div>
</template>
<script>
import MyInput from './MyInput.vue';
export default {
  components: {
    MyInput
  },
  data() {
    return {
      message: ''
    };
  }
};
</script>

在上面的例子中，父组件通过v-model与自定义组件MyInput绑定，当用户在自定义组件中输入内容时，v-model会自动将输入的内容更新到父组件中的message属性中。

六、总结

在Vue.js中，获取页面输入的值有多种方式，其中最常用的是v-model指令，它可以实现表单控件与数据的双向绑定。此外，还可以通过refs获取DOM元素的值，或者通过表单事件监听获取输入的值。在实际开发中，可以根据具体需求选择合适的方式，或者将多种方式结合使用，以实现更复杂的需求。无论使用哪种方式，掌握这些技术可以让我们在Vue.js开发中更加得心应手。

vue.js里 如何拿到页面输入的值