v-model获取表单元素数据

0 前言

之前我们学习的东西都是把我们的数据向页面展示，但是我们如何通过vue语法接收页面输入的数据呢？

比如我们现在有个输入框，我们如何获取输入框输入的数据呢？

这里就要用到我们新的语法v-model了！

1 语法——用于input

我们通过简单的示例去讲解v-model的语法，如下

<template>
  <div>
    /// 给响应式变量进行赋值
    <input v-model="inputValue"  placeholder="输入内容">
    // 输出响应式变量的值
    <p>输入的内容是: {{ inputValue }}</p>
  </div>
</template>
<script setup>
import { ref } from 'vue';
// 声明响应式变量
const inputValue = ref('');
</script>

效果图如下，

我们看里面的关键语句

<input v-model="inputValue"  placeholder="输入内容">

通过往输入input中添加v-model=”变量名”，实现通过变量接收输入值。

这就是v-model的作用。

他同时可以作用于<textarea>等各类。

2 结语

通过v-model，我们可以接收用户输入的数据。

我们继续往后接触学习吧！